Vue：关于transition-group过渡动画，别再踩这个坑了！

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/csu_passer/article/details/85016042

使用transition-group踩到的坑

按照vue的文档和UI图开开心心的噼里啪啦的敲代码：

  <transition-group class="ys-notices" tag="ul" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" >
      <li class="item" v-show="index === currentIndex" v-for="(item,index) in notices" :key="item.id">
        公告：{{item.notice}}
      </li>
  </transition-group>

可是，我的妈呀，这是怎样的情况：

找啊找啊找bug–可是动画类的bug不好找啊！！

众里寻他千百度

鬼知道我花了多长时间才想明白这里出现的问题在哪的T^T，反正！

千万要在需要过渡动画的父组件上加上相对定位，子组件上加上绝对定位!

不然将产生不可预知的神奇的乱七八糟的动画效果 T_T

加上之后就好看多了！

我恨死这个bug了

很讨厌这次出现的bug，所以我要把这个组件的源码贴出来，走过路过的可以看看还能改进吗，感谢~

Advance：需要先npm install animate.css

<template>
  <transition-group class="ys-notices" tag="ul" enter-active-class="animated bounceInLeft" leave-active-class="animated bounceOutRight" >
      <li class="item" v-show="index === currentIndex" v-for="(item,index) in notices" :key="item.id">
        公告：{{item.notice}}
      </li>
  </transition-group>
</template>

<script>

  import animated from 'animate.css'
  export default {
    name: "Notice",
    props:{
      notices:{
        type: Array,
        default(){
          return [{
            id:1,
            notice:"下单闪电配送，平均20分钟送达!"
          },{
            id:2,
            notice:"这是第二条测试数据"
          },{
            id:3,
            notice:"这是第3条测试数据"
          },{
            id:4,
            notice:"这是第4条测试数据"
          }]
        }
      }
    },
    data(){
      return {
        timer:null,
        currentIndex:0
      }
    },
    computed:{

    },
    mounted(){
      if(this.notices.length>1){
        this.timer = setInterval(this.updateNotices,3000);
      }
    },
    beforeDestroy(){
      this.timer && clearInterval(this.timer);
    },

    methods:{
      updateNotices(){
        this.notices.push(this.notices.shift());
      }
    }
  }
</script>

<style lang="less" scoped>
  @import url("../../../assets/style/color");
  @height:30px;
  .ys-notices{
    position: relative;
    width: 100%;
    height: @height;
    /*overflow-y: hidden;*/

    color: @notice-color;
    font-size:1.4rem;
    font-weight: 300;
    background: rgba(216,216,216,0.2);
    border-radius: 22px;

    li{
      position: absolute;
      list-style: none;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
</style>