css动画效果代码淡入淡出折叠展开点击悬浮

.coup-anim {
  width: -webkit-fill-available;
  bottom: 0;
  position: fixed;
  border-radius: 20upx;
  margin-bottom: 0;
  margin: 20upx 100upx;
  background-color: #fff;
  height:900upx;
  /* 淡入 */
  animation: fadeIn 0.4s .1s ease both;
}
@keyframes fadeIn {
 0% {
  opacity: 0;
  transform: translateY(400upx)
 }
 100% {
  opacity: 1;
  transform: translateY(0)
 }
}

.coup-anim {
    width: -webkit-fill-available;
    bottom: 0;
    position: fixed;
    border-radius: 20upx;
    margin-bottom: 0;
    margin: 20upx 100upx;
    background-color: #fff;
    height:900upx;
    animation: fadeIn 0.4s .1s ease both;
  }
  @keyframes fadeIn {
   0% {
    opacity: 1;
    transform: translateY(0)
   }
   100% {
    opacity: 0;
    transform: translateY(calc(100% + 20upx))
   }
  }

.button {
  margin: 100upx;
  background-color: #e7ad8e;
  color: #900b09;
  opacity: 0.9;
}
.active {
  opacity: 1;
  transform: all .3s;
}

<template>
  <view>
    <view class="item" :class="item.class" v-for="item in list" :key="item.content">{{item.content}}</view>
    <button @click="test">测试</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list:[
          {content:'item1'},
          {content:'item2'},
          {content:'item3'},
          {content:'item4'},
          {content:'item5'},
          {content:'item6'}
        ]
      }
    },
    methods: {
      test() {
        this.list = [
          {content:'item1'},
          {content:'item2'},
          {content:'item3'},
          {content:'item4'},
          {content:'item5'},
          {content:'item6'}
        ]
        let time = 300
        for(let index in this.list) {
          time = (time + 30)
          setTimeout(() => {
            // $set新增属性响应式更新模板
            this.$set(this.list[this.list.length-index-1],'class','rotate')
            // this.list[index].class = 'rotate'
          },time)
        }
      }
    },
    onLoad() {
    }
  }
</script>
<style>
  page{
    background-color: #eee;
  }
  /* 折叠淡出 */
.item {
  padding: 15rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  background-color: #fff;
  /* animation: fadeIn 0.4s .1s ease both; */
}
.rotate {
  animation: fadeIn 0.4s .1s ease both;
}
@keyframes fadeIn {
 0% {
  opacity: 1;
  transform: translateY(0)
 }
 100% {
  opacity: 0;
   transform: translateY(-100%)
 }
}
</style>

<template>
  <view>
    <view class="item" :class="item.class" v-for="item in list" :key="item.content">{{item.content}}</view>
    <button style="position: fixed;bottom: 0;" @click="test">测试</button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        list:[
          {content:'item1'},
          {content:'item2'},
          {content:'item3'},
          {content:'item4'},
          {content:'item5'},
          {content:'item6'}
        ]
      }
    },
    methods: {
      test() {
        this.list = [
          {content:'item1'},
          {content:'item2'},
          {content:'item3'},
          {content:'item4'},
          {content:'item5'},
          {content:'item6'}
        ]
        let time = 300
        for(let index in this.list) {
          time = (time + 30)
          setTimeout(() => {
            // $set新增属性响应式更新模板
            this.$set(this.list[index],'class','rotate')
            // this.list[index].class = 'rotate'
          },time)
        }
      }
    },
    onLoad() {
    }
  }
</script>
<style>
  page{
    background-color: #eee;
  }
  /* 折叠淡出 */
.item {
  padding: 15rpx;
  border-radius: 10rpx;
  margin: 20rpx;
  opacity: 0;
  transform: translateY(-100%);
  background-color: #fff;
  /* animation: fadeIn 0.4s .1s ease both; */
}
.rotate {
  animation: fadeIn 0.4s .1s ease both;
}
@keyframes fadeIn {
 0% {
    opacity: 0;
     transform: translateY(-100%)
 }
 100% {
   opacity: 1;
   transform: translateY(0)
 }
}
</style>