实现一个文字/图片向上滚动切换的动画效果

1. 安装并引入animate.css

   • 安装：npm install animate.css --save/yarn add animate.css
   • 引入：import ‘animate.css’;

2. 代码

   <template>
     <div>
       <!-- 
       enter-active-class：进入动画样式
       leave-active-class：离开动画 样式
     -->
       <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__fadeInUp" leave-active-class="animate__fadeOutUp">
         <div class="box" v-show="!isShow" key="1">
           <span>{{text}}</span>
         </div>
       </transition-group>
   
     </div>
   </template>
   
   <script>
     import "animate.css"
     export default {
       data() {
         return {
           isShow: false,
           text: '',
           textIndex: 0,
           textList: [1111, 2222, 3333, 4444, 55555],
           setTime:''
         }
       },
       created() {
         // 页面初始显示的文字
         this.text = this.textList[this.textIndex]
       },
       mounted() {
         // 开启定时器
         this.setTime = setInterval(() => {
           this.show()
         }, 5000)
       },
       methods: {
         show() {
           // 执行关闭动画
           this.isShow = true
   
           // 判断动画是否为关闭状态
           if (this.isShow) {
             // 动画为关闭状态时索引自增
             this.textIndex++
             // 判断到最后一个元素时，从0开始
             if (this.textIndex == this.textList.length) {
               this.textIndex = 0
             }
           }
   
           // 给关闭动画留展示时间
           setTimeout(() => {
             // 更改页面显示的文字
             this.text = this.textList[this.textIndex]
             // 执行显示动画
             this.isShow = false
           }, 1000)
         }
       },
       beforeDestroy(){
         // 关闭定时器
         clearInterval(this.setTime);
       }
     }
   </script>
   
   <style scoped>
   .box {
     height: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
     color: #fff;
     background: #000;
   }
   </style>
   

3. 实现效果

   

4. 如果动画不执行

   VUE中使用animate.css显示不出动画效果