Simple to share the common bottom popover layer or drop-down pop-up layer (code needs to be modified) content popover animation effect, here to share the bottom popover animation effect after clicking the button. The first method is to dynamically set the height of the display area, and the second method is to dynamically set the position of the display area moving (using transform:translateY).

(1) Achieve results

(2) Implementation analysis

  • The first way to dynamically set the height is to have a container for the background color (gray area) and a container for the popover content (pink area). The two are independent and the principle is the same. The pink area is set to the absolute position (at the bottom of the screen) and the default content area style. The height of the content area is dynamically set, such as pop-up: The initial height is 0 (hidden), through the animation time set by the animation, change the height from 0 to the specified height, the content will be displayed slowly, and then keep the animation style of the last frame. The same goes for contraction.
  • The second way to dynamically set the position is to have a container for the background color (gray area) and a container for the popover content (pink area). The two are independent and the principle is the same. The pink area is set to the absolute position (at the bottom of the screen) and the default content area style, such as pop-up: At the beginning, the position of the pink area is shifted out of the screen (hidden). Through the animation time set by the animation, move the pink area from out of the screen to inside the screen (default setting is at the bottom of the screen), the content will be displayed gradually, and then keep the animation style of the last frame. The same goes for contraction. The code also has comments.

(iii) Implementation code

The first dynamic height setting method is implemented:

1. WXML code:

<button catchtap='clickPup'>Click on the bottom animation popover</button>

<! -- The contents of the bottom popover animation -->
<view class='pupContent {{click? "showContent": "hideContent"}} {{option? "open": "close"}}' hover-stop-propagation='true'>
  <view class='pupContent-top'>Test the</view>
</view>
<! -- Fixed background -->
<view class='pupContentBG {{click?" showBG":"hideBG"}} {{option?" openBG":"closeBG"}}' catchtap='clickPup'>
</view>
Copy the code

2. WXSS code:

.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;
}

/* Set the display background */

.showBG {
  display: block;
}

.hideBG {
  display: none;
}

/* Pop up or close the animation to dynamically set the content height */

@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; }}/* Animation when displaying or closing content */

.openBG {
  animation: slideBGtUp 0.5 s ease-in both;
  /* Animation-fel-mode: Both animations will perform forwards and backwards actions. * /
}

.closeBG {
  animation: slideBGDown 0.5 s ease-in both;
  /* Animation-fel-mode: Both animations will perform forwards and backwards actions. * /
}

/* Set the display */

.showContent {
  display: block;
}

.hideContent {
  display: none;
}

/* Pop up or close the animation to dynamically set the content height */

@keyframes slideContentUp {
  from {
    height: 0;
  }

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

  to {
    height: 0; }}/* Animation when displaying or closing content */

.open {
  animation: slideContentUp 0.5 s ease-in both;
  /* Animation-fel-mode: Both animations will perform forwards and backwards actions. * /
}

.close {
  animation: slideContentDown 0.5 s ease-in both;
  /* Animation-fel-mode: Both animations will perform forwards and backwards actions. * /
}

Copy the code

3. Js code:

  data: {
    click: false.// Whether to display popup contents
    option: false.// Displays a popover or close popover operation animation
  },

  // The user clicks to display the popup
  clickPup: function() {
    let _that = this;
    if(! _that.data.click) { _that.setData({click: true})},if (_that.data.option) {
      _that.setData({
        option: false,})// Turn off the contents of the popover animation, if not set, it will appear: clicking anywhere will appear a popover, instead of clicking the specified position will appear a popover
      setTimeout((a)= > {
        _that.setData({
          click: false,}}),500)}else {
      _that.setData({
        option: true})}},Copy the code

The second dynamic translation content area location method is implemented:

Relative to the first code modification: only the height of the pink area and the animation effect of the pink area popping and retracting:

/* Pop up or close the animation to dynamically set the content height */

@keyframes slideContentUp {
  from {
    transform: translateY(100%)./* If set to positive, the bottom pops up; if set to negative, the opposite */
  }

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

  to {
    transform: translateY(100%). }}Copy the code

References:

  • CSS3 (iii) Animation introduction
  • Wechat applet CSS3 animation drop-down menu

Thanks for reading.