<template> <div> <div @click="addItem">添加</div> <div @click="sort">排序</div> <div> <div> <transition-group tag="p" appear v-on:before-enter="beforeEnter" v-on:after-enter="afterEnter"> // 这里的data-index 是一个识别标识， 便于在js钩子中获得当前元素的序号 <div v-for="(i, index) in list" :key="i" :data-index="index">{{i}}</div> </transition-group> </div> </div> </div> </template>
<script lang="ts"> import Vue from "vue"; export default Vue.extend({ name: "home", data() { return { show: true, list: [5,4,3,2,1], nextNum: 6 }; }, methods: { showDom() { this.show = !this.show }, beforeEnter: function (el: any) { el.style.opacity = 0 // 每个元素插入之前， 透明度为0 let index = el.dataset.index 每次可能插入多个元素， // 页面加载时先展示5个 if (index < 5) { //设置动画延迟， 实现按续插入的效果 el.style.animationDelay = el.dataset.index * 0.3 + 's' } }, afterEnter: function (el) { el.style.opacity = 1 console.log('afterEnter') }, addItem() { this.list.push(this.nextNum++) }, sort() { this.list = this.list.sort((a, b) => a -b) } } }); </script>
@keyframes animat { 0% { margin-left: 300px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } .fade-enter { opacity: 0; margin-left: 300px; } .fade-enter-active { opacity: 0; animation: animat 1s; } .fade-enter-to { opacity: 1; margin-left: 0; } .fade-move { transition: all 0.3s; } .fade-leave { left: 10px; } .fade-leave-active { transition: all 2s ease-out; } .fade-leave-to { left: -100%; }
效果
