vue transition-group 問題

<transition-group>能夠對列表項增長或刪除時候加入過分動畫，用法是使用<transition-group>代替外層標籤,

能夠寫成這樣<transition-group name="list" tag="ul">    name爲加載過分css時的名稱，tag爲代替的標籤名

接下來在css中加上進入前、離去後的css，和過渡css就能夠實現過渡動畫

.list-enter-active, .list-leave-active {

　　transition: all 1s;

}

.list-enter, .list-leave-to{

　　opacity: 0;

　　transform: translateY(30px);

}

須要格外注意的是在內層li中必須加上key屬性，並且key屬性不能爲v-for循環中的index，能夠爲item.id  item.name之類，否則你的過渡css總會加載在最後一個列表項上！！