vue.js基础之使用ainmate.css

前端yyds无敌

于 2021-08-08 21:42:11 发布

阅读量165

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/hdb2405474279/article/details/119521530

版权

vue.js 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

详细请参考官网：动画.css |CSS 动画的跨浏览器库。 (animate.style)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用ainmate.css</title>
		<script src="../js/vue.js"></script>
		  <link
		     rel="stylesheet"
		     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
		   />
		 </head>
<!-- 	<style>
	@keyframes name{
		0%{
			transform: scale(0);
		}
		50%{
			transform: scale(1.5);
		}
		100%{
			transform: scale(1);
		}
	}
	
		
		.v-enter-active{
			transform-origin: left center;
			animation: name 1s;
		}
		
		.v-leave-active{
			transform-origin: left center;
			animation: name 1s reverse;
		}
	</style> -->
	<body>
		<div id="app">
			<transition name='fade' enter-active-class="animate__animated animate__bounce" leave-active-class="animate__animated animate__bounce">
				<div v-if="a">你好世界！！</div>
			</transition>
			
			<button @click="btn">消失</button>
		</div>
		
		<script>
		var app = new Vue({
			el:'#app',
			data:{
				a:true
			},
			methods:{
				btn:function(){
					this.a =! this.a
				},
			}
		})
		</script>
	</body>
</html>

前端yyds无敌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js基础之使用ainmate.css

详细请参考官网：动画.css |CSS 动画的跨浏览器库。 (animate.style)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>使用ainmate.css</title> <script src="../js/vue.js"></script> <link rel="styleshee
复制链接

扫一扫