使用animate.css完成动画效果

albert48

于 2019-12-05 16:47:10 发布

阅读量281

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/albert48/article/details/103408077

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的动态过渡效果示例，通过HTML、CSS和Vue.js结合，展示了如何为元素添加进入和离开的动画效果。具体包括：使用transition组件控制动画，设置不同的动画类名，以及通过按钮触发元素显示状态改变。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
	<title>TodoList</title>
	<script src="./vue.js"></script>
	<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
	<div id='app'>
		<transition name="fade" enter-active-class="animated swing" leave-active-class="animated zoomOutRight" appear appear-active-class='animated swing'>
			<div v-if="show" >HELLO</div>
		</transition>
		<button @click='handleClick'>change</button>
	</div>

	<script>

		var vm=new Vue({
			el:'#app',
			data:{
				show:true
			},
			methods:{
				handleClick(){
					this.show=!this.show;
				}
			}
		})

	</script>

</body>
</html>