小程序modal弹窗，底部弹窗动效，底部弹出动效

【注意】css放的位置可能影响效果

参考a-level

competitionFilterCover

 

1.容器（不是根容器，是内容容器）：position: absolute;

  top: 100vh;

  animation: moveon 0.5s forwards;

 

2.添加属性：hideAnimate

 

3.

class="root {{hideAnimate ? 'rootHide' : ''}}"

class="whiteContent {{hideAnimate ? 'contentHide' :''}}"

4.

hideSelf(){

      this.setData({

        hideAnimate: true

      })

      setTimeout(() => {

        this.setData({

          show: false

        })

      }, 400);

    },

5. ！！！！！注意，动效class的顺序可能有影响

如果下面这种顺序，contentHide就不会执行， 要吧contentHide放到.content 后面才能执行动效

.contentHide {

animation: containOut 0.4s backwards;

}

.content {

display: flex;

flex-direction: column;

align-items: center;

width: 100vw;

background: #FFFFFF;

border-radius: 48rpx 48rpx 0px 0px;

max-height: 1168rpx;

overflow-y: scroll;

position: absolute;

top: 100vh;

animation: moveon 0.5s forwards;

}