vue中transitions动画效果 结合animate.css使用

引入animate动画库
<link rel="stylesheet" href="lib/animate.min.css">
下面是一个简单的进入、消失动画
<script>
			window.onload = function(){
				new Vue({
					el:'#box',
					data:{
						bSign:true
					},
					methods:{
						toggle(){
							if(this.bSign == true)
							{
								this.bSign = false;
								
							}else{
								this.bSign = true;
							}
							
						}
					},
					transitions:{
						//定义动画
						bounce:{
							//zoomInLeft和zoomOutRight是animate里的类名
							enterClass:'zoomInLeft',
							leaveClass:'zoomOutRight'
						}
					}
				})
			}
		</script>
		<style>
			#box{
				width:400px;
				margin:0 auto;
			}
			#div1{
				width:100px; height:100px; background: red;
			}
			.fade-transition{
				transition:1s all ease;				
			}
			.fade-enter{   
				opacity: 0;
			}
			.fade-leave{
				opacity: 0;
				transform:translateX(200px);
			}
		</style>
	</head>
	<body>
		<div id="box">
			<input type="button" value="按钮" @click="toggle"/>
			<div id="div1" class="animated" v-show="bSign" transition="bounce">sss</div>			
		</div>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND