Vue animated动画

最新推荐文章于 2024-04-29 13:25:28 发布

qwer12321ck76

最新推荐文章于 2024-04-29 13:25:28 发布

阅读量653

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/u012497072/article/details/106407672

版权

vue 专栏收录该内容

58 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hello World</title>
	<script src='./vue.js'></script>
	<link rel="stylesheet" type="text/css" href="./animate.css">
	<style>
		@keyframes bounce-in {
			0% {
				transform: scale(0);
			}
			50% {
				transform: scale(1.5);
			}
			100% {
				transform: scale(1);
			}
		}
		.enter {
			transform-origin: left center;
			animation: bounce-in 1s;
		}
		.leave {
			transform-origin: left center;
			animation: bounce-in 1s reverse;
		}
		.fade-enter, .fade-leave-to {
			opacity: 0;
		}
		.fade-enter-active, .fade-leave-active {
			transition: opacity 3s;
		}
	</style>
</head>
<body>
	<div id="app">
		<!--<transition name="fade" 
					enter-active-class="enter"
					leave-active-class="leave"
					>
			<div v-show="show">hello world</div>
		</transition>-->
		<!--使用animate库动画效果-->
		<!--type="transition" swing又自己的动画时长，fade-enter-active也有自己的动画时长，这里设置以fade-enter-active为主-->
		<transition name="fade" 
					:duration="{enter: 5000, leave: 10000}"
					appear
					enter-active-class="animated swing fade-enter-active"
					leave-active-class="animated shake fade-leave-active"
					appear-active-class="animated swing">
			<div v-show="show">hello world</div>
		</transition>
		<button @click="handleClick">toggle</button>
	</div>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				show: true
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
				}	
			}
		})
	</script> 
</body>
</html>

qwer12321ck76

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue animated动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Hello World</title> <script src='./vue.js'></script> <link rel="stylesheet" type="text/css" href="./animate.css"> <style>
复制链接

扫一扫