使用animate.css完成动画效果

最新推荐文章于 2023-07-13 14:48:24 发布

原创最新推荐文章于 2023-07-13 14:48:24 发布 · 297 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

12 篇文章

订阅专栏

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

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