请稍等 ...

没有动画效果是什么原因？

<!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>

老师，帮忙看看，按照您那样写，没有动画效果是什么原因？

慕斯1122527 2021-04-08 21:15:00

源自：5-1 Vue动画 - Vue中CSS动画原理

837

收起

提交取消

2回答

极致简洁 2022-06-05 12:50:03

Vue3.0 中需要把.v-enter 改成 v-enter-from

可以百度下Vue3.0 和Vue2.0的transition区别

0 回复有任何疑惑可以回复我~

收起回答

提问者慕斯1122527 2021-04-09 23:35:01

求解，看了很久，没写错吧。

0 回复有任何疑惑可以回复我~

收起回答

Dell #1
```
transition: opacity 5s; 写错了
```
回复有任何疑惑可以回复我~ 2021-04-10 21:05:36
提问者慕斯1122527 回复 Dell #2
```
老师，正确是怎么写？
```
回复有任何疑惑可以回复我~ 2021-04-10 21:22:32
Dell 回复提问者慕斯1122527 #3
```
transition: 5s; opacity: 1;
```
回复有任何疑惑可以回复我~ 2021-04-10 21:25:56