欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Vue的动画效果（自定义类）[animate.css]

程序员文章站 2024-03-25 14:52:46
...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
		<title>自我实验</title>
		<style type="text/css">
			.activego-enter,
			.activego-leave-to {
				opacity: 0;
			}

			.activego-leave-active,
			.activego-enter-active {
				transition: opacity 1s;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 这里appear是确认一出现就有的动画效果 -->
			<!-- appear-active-class就是所谓的自定义一出来就有的动画 -->
			<!--enter-active-class和leave-active-class这都是自定义的动画，传进去就行  -->
			<transition :duration="{enter:4000 , leave:5000}" name="activego" appear enter-active-class="animated fadeIn activego-enter-active" leave-active-class="animated fadeOut activego-leave-active"
			 appear-active-class="animated shake">
			<!-- 这里的duration是表示持续时间的，在这里enter持续时间为4s leave是5s 可以通过控制台详细看见 -->
				<div class="" v-show="show">
					hello,everone!
				</div>
			</transition>
			<button type="button" @click="change">点击一下</button>
		</div>



		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					show: true
				},
				methods: {
					change() {
						this.show = !this.show;
					}
				}
			})
		</script>
	</body>
</html>

详细都再注释里面了，加上animate的css库，真是太好用了！

相关标签： 基础· 前端 Vue vue.js

上一篇： 【PHP 基础类库】Prototype 原型版教学文章！ 博客分类： PHP 基础类库 验证码缩略图数据库文件上传分页 

下一篇： 基于Animate.css和 jquery-aniview 做动画

推荐阅读