vue.js知识点-transition-group的应用（实例展示）

transition只能用于单个元素的动画，list等多元素的动画要使用transition-group

头条-静敏的编程秘诀-vue教程合集

知识点1：style的组合使用

• 入场动画

.v-enter, .v-leave-to {
            opacity: 0;
            transform: translateY(80px);
        }

其中 opacity：元素不透明级别，0.0到1.0 为完全透明到完全不透明
transform: translateY(80px) 实现元素Y轴方向上的位移，同理X轴Z轴等

• 出场动画

.v-enter-active, .v-leave-active {
            transition: all 0.6s ease;
            
        }

其中 transition: all 0.6s ease 提供0.6秒的动画效果

知识点2：transition-group 包裹需要实现动画的元素组

这里使用v-for循环举例：

<transition-group appear tag="ul">
           
            <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                {{  item.id }}---{{ item.name}}
            </li>
        </transition-group>

其中：

• v-for的元素要添加动画，必须绑定 key；
• appear关键字提供页面初始加载的列表滑动效果；
• tag关键字提供对应的标签，不指定时，默认提供span标签

知识点3：列表元素的动画效果实现

.v-move 和.v-leave-to 组合提供动画效果

.v-move {
            transition: all 0.6s ease;
        }

        .v-leave-active{
            position: absolute;
        }

效果：