<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
span {
display: inline-block;
width: 50px;
font-size: 30px;
}
.v-enter-from {
opacity: 0;
transform: translateY(30px);
}
.v-enter-to {
opacity: 1;
transform: translateY(0);
}
.v-enter-active {
transition: all .5s ease-in;
}
/* 其他受影响移动的元素的动画 */
.v-move {
transition: all 1s ease-in;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
// 这里是transition-group 不再是transition标签了
const app = Vue.createApp({
template: `
<div>
<transition-group>
<span v-for="item in list" :key="item">{{item}}</span>
</transition-group>
<button @click="handleClick">增加</button>
</div>
`,
data(){
return {
list: [1, 2, 3]
}
},
methods: {
handleClick() {
this.list.unshift(this.list.length + 1)
}
},
})
app.mount('#root')
</script>
</body>
</html>
vue3进阶动画4-多组件多元素动画切换
最新推荐文章于 2024-05-13 08:10:13 发布