Анимация нижнего всплывающего окна анимации апплета Wechat (два метода)

внешний интерфейс контейнер Апплет WeChat анимация

Просто поделитесь анимационным эффектом всплывающего окна содержимого часто используемого слоя нижнего всплывающего окна или всплывающего слоя раскрывающегося списка (код необходимо изменить). Вот эффект анимации нижнего всплывающего окна. всплывающее окно после нажатия кнопки. Первый метод заключается в динамической установке высоты области отображения, а второй способ — в динамической установке положения перемещения области отображения (используя дляtransform:translateY);

(1) Осознайте эффект

实现效果
Чтобы кратко объяснить, эффект, достигаемый двумя методами, одинаков.Только нажатием кнопки можно запустить всплывающее окно (указанное положение).После того, как всплывающее окно всплывает, всплывающее окно может быть только убирается, нажав на серую область фона. Щелкните область содержимого всплывающего окна (розовая часть). Всплывающее окно не может быть убрано), вы можете настроить кнопку закрытия в правом верхнем углу уголок розовой части.

(2) Анализ реализации

  • Первый метод динамической установки высоты: вам нужен контейнер для цвета фона (серая область) и контейнер для содержимого всплывающего окна (розовая область), они независимы, и принцип реализации одинаков. ; если розовая область , это установить абсолютное положение (внизу экрана) и стиль области содержимого по умолчанию, а также динамически установить высоту области содержимого, например, всплывающее окно: высота равна 0 (скрытый) в начале, а время анимации, установленное анимацией, изменит высоту с 0. Когда оно достигнет указанной высоты, содержимое будет отображаться медленно, а затем сохранится стиль анимации последнего кадра; то же самое верно для усадки.
  • Второй способ динамической установки позиции: вам нужен контейнер для цвета фона (серая область) и контейнер для содержимого всплывающего окна (розовая область).Они независимы, и принцип реализации одинаков. ; если розовая область , это установить абсолютное положение (внизу экрана) и стиль области содержимого по умолчанию, например, всплывающее окно: в начале положение розовой области переводится с экран (скрыт), а розовая область перемещается с экрана перевода на экран (настройка по умолчанию находится внизу экрана), содержимое будет медленно отображаться, а затем сохранится стиль анимации последнего кадр; то же самое верно для усадки. Код также комментируется.

(3) Код реализации

Реализован первый метод динамического задания высоты:

1. wxml-код:

<button catchtap='clickPup'>点击底部动画弹窗</button>

<!-- 底部弹窗动画的内容 -->
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
  <view class='pupContent-top'>测试一下</view>
</view>
<!-- 固定的背景 -->
<view class='pupContentBG {{click?"showBG":"hideBG"}} {{option?"openBG":"closeBG"}}' catchtap='clickPup'>
</view>

2. wxss-код:

.pupContentBG {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
}

.pupContent {
  width: 100%;
  background: pink;
  position: absolute;
  bottom: 0;
  box-shadow: 0 0 10rpx #333;
  height: 0;
  z-index: 999;
}

/* 设置显示的背景 */

.showBG {
  display: block;
}

.hideBG {
  display: none;
}

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideBGtUp {
  from {
    background: transparent;
  }

  to {
    background: rgba(0, 0, 0, 0.1);
  }
}

@keyframes slideBGDown {
  from {
    background: rgba(0, 0, 0, 0.1);
  }

  to {
    background: transparent;
  }
}

/* 显示或关闭内容时动画 */

.openBG {
  animation: slideBGtUp 0.5s ease-in both;
  /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}

.closeBG {
  animation: slideBGDown 0.5s ease-in both;
  /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}

/* 设置显示内容 */

.showContent {
  display: block;
}

.hideContent {
  display: none;
}

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideContentUp {
  from {
    height: 0;
  }

  to {
    height: 800rpx;
  }
}

@keyframes slideContentDown {
  from {
    height: 800rpx;
  }

  to {
    height: 0;
  }
}

/* 显示或关闭内容时动画 */

.open {
  animation: slideContentUp 0.5s ease-in both;
  /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}

.close {
  animation: slideContentDown 0.5s ease-in both;
  /* animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 */
}

3. js-код:

  data: {
    click: false, //是否显示弹窗内容
    option: false, //显示弹窗或关闭弹窗的操作动画
  },

  // 用户点击显示弹窗
  clickPup: function() {
    let _that = this;
    if (!_that.data.click) {
      _that.setData({
        click: true,
      })
    }

    if (_that.data.option) {
      _that.setData({
        option: false,
      })

      // 关闭显示弹窗动画的内容，不设置的话会出现：点击任何地方都会出现弹窗，就不是指定位置点击出现弹窗了
      setTimeout(() => {
        _that.setData({
          click: false,
        })
      }, 500)


    } else {
      _that.setData({
        option: true
      })
    }
  },

Реализован второй метод динамического панорамирования положения области контента:

По сравнению с измененной частью первого кода: изменены только высота розовой области и анимационный эффект всплывающего окна и втягивания розовой области:

/* 弹出或关闭动画来动态设置内容高度 */

@keyframes slideContentUp {
  from {
    transform: translateY(100%); /*设置为正数则底部弹出来，负数则相反*/
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes slideContentDown {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(100%);
  }
}

Использованная литература:

Спасибо за прочтение.

Категории