没有动画效果是什么原因？
来源：5-1 Vue动画 - Vue中CSS动画原理
慕斯1122527
2021-04-08
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的css动画原理</title>
<script src='./vue.js'></script>
<style>
.v-enter,.v-leave-to{
opacity: 0;
},
.v-enter-active,.v-leave-active{
transition: opacity 5s;
}
</style>
</head>
<body>
<div id='app'>
<transition >
<div v-if="show">Hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script>
var vm = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show;
}
}
})
</script>
</html>
老师，帮忙看看，按照您那样写，没有动画效果是什么原因？
写回答
2回答
-
极致简洁
2022-06-05
Vue3.0 中需要把.v-enter 改成 v-enter-from
可以百度下Vue3.0 和Vue2.0的transition区别
00 -
慕斯1122527
提问者
2021-04-09
求解，看了很久，没写错吧。
052021-04-12
相似问题