CSS3 实现动画慢慢升起和缓缓落下

本文主要介绍css3动画实现父容器慢慢升起和缓缓落下

思路：
1.先把静态样式写好
2.给父容器添加样式transform: translateY(100%);这样就可以被隐藏起来，如果不生效，可以再加一下display:inline-block;可视区域最好在加一个overflow:hidden;体验更加。
3.通过对于的方法给父容器添加动画进入样式和动画退出样式。

下方展示的是小程序的实现动画慢慢升起和缓缓落下方法：（可通用，步骤3可以通过css和js实现）
index.wxml

<view class='shadow {{isInfo?"fadebg_in":""}}'  wx:if="{{isInfo}}" bindtap='close'></view>  // 通过isInfo的布尔值判断显示同行进入还是退出样式
  <view class='info-wrapper {{isInfo?"fade_bottom_out":"fade_bottom_in"}}' >
   // 此处为详细信息，代码自行编写
</view>

index.wxss

.info-wrapper{
  position: fixed;
  /* top: 10%; */
  bottom: 0;
  width: 100%;
  height: 90vh;
  overflow: scroll;
  background-color: #fff;
  padding: 32rpx 35rpx 220rpx;
  z-index: 3;
  box-sizing: border-box;
  transform: translateY(100%);  // 当父容器编译完成后，再添加此样式
}
/* 动画 */
@keyframes fadeIn { // 可用于列表页
    0% { opacity: 0; -webkit-alpha: grayscale(0%);alpha: grayscale(0%);}
    100% { opacity: 1; -webkit-alpha: grayscale(100%);alpha: grayscale(100%);}
}
@keyframes fadebgIn {// 可用于遮罩
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.fade_in {
  animation: fadeIn 1s both;
}
.fadebg_in {
  animation: fadebgIn 1s both;
}
@keyframes fadeBottom_in { // 可用于容器弹出
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
.fade_bottom_in{
  animation: fadeBottom_in 0.5s linear forwards;
}
@keyframes fadeBottom_out {  // 可用于容器退出
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.fade_bottom_out{
  animation: fadeBottom_out 0.5s linear forwards;
}

展示图如下：