Vue学习-动画（六）

效果：
演示：组件切换动画、列表增加 删除动画。

之前两篇文章写过用animate.css实现的动画 点击即可跳转查看详细代码。

本章讲述Vue自己封装的动画效果和css3，当然我还是喜欢用animate

关于入场点/入场时间段和出场点/出场时间段 请看Vue.js官方详细介绍

Vue自带动画效果

出场点和入场点 是一样的地方
入场时间段 离场时间段是相同进行的

/* 入场点 和 出场点 */
vueimg-enter,.vueimg-leave-to{
	opacity: 0;
	transform: translateX(450px);
}

/* 入场时间段 离场时间段 */
.vueimg-enter-active,.vueimg-leave-active{
	transition: all 2s ease;
}

transition 标签中的name 就 name-enter 用于动画的区分

<div class="flex">
	<button type="button" @click="flag=!flag">toggle</button>
	<br>
	<transition name="vueH2">
		<h2 v-show="flag">这是Vue自带的动画效果</h2>
	</transition>
	<transition name="vueimg">
		<img v-show="flag" src="../img/lp.jpg" width="500px"/>
	</transition>
	<hr >
</div>

css3的过渡效果(transition)

textarea{
	width:150px;
	transition:width 2s;
}
textarea:hover{
	width: 500px;
}

<div class="flex">
	<h2>css3的过渡效果(transition)</h2>
	<textarea placeholder="请输入你读后感!" rows="5"></textarea>
</div>

css3的动画效果(animation)

时间累次加0.2s 就有波浪的效果

.dhBtn{
	position:relative;
	-webkit-animation: dh 1.2s linear;/* 默认ease */
}

@keyframes dh
{
	0%   {top:-20px;}
	20%  {top:0px;}
	40%  {top:20px;}
	60%  {top:40px;}
	80%  {top:20px;}
	100% {top:0px;}
}

<div class="flex">
	<h2>css3的动画效果(animation)</h2>
	<button type="button" class="dhBtn" style="line-height: 50px;">喜欢我你就点我吧</button>
	<button type="button" class="dhBtn1" style="line-height: 50px;">喜欢我你就点我吧</button>
	<br>
	<br>
	<button type="button" class="dhBtn2" style="line-height: 50px;">喜欢我你就点我吧</button>
	<button type="button" class="dhBtn3" style="line-height: 50px;">喜欢我你就点我吧</button>
</div>