Vue学习-动画特效

最新推荐文章于 2024-05-12 19:32:25 发布

小太阳的博客

最新推荐文章于 2024-05-12 19:32:25 发布

阅读量269

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/qq_44859314/article/details/105410026

版权

Vue学习专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Vue中的CSS动画（过渡动画）

首先，我们先举一个小例子，实现一个简单的功能：点击按钮使显示内容从隐藏状态到显示状态的过渡。此处是通过v-if控制标签的显示与隐藏的，也可通过v-show来控制标签的显示与隐藏。

<div id="app">
	<transition>
		<div v-if="show">hello world</div>
	</transition>
	<button @click="handleClick">切换</button>
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:"#app",
		data:{
			show:true
			},
		methods:{
		     handleClick:function(){
					this.show=!this.show
					}
			}
		})
		</script>

但是页面上此时并没有变化，这里涉及到一个transition的动画原理：
在这里插入图片描述
当一个元素被transtion包裹的时候，vue会自动分析元素的CSS样式，并构建一个动画流程：在动画即将被执行的一瞬间，vue会往内部的div上增加两个class名字；vue在动画运行到第二帧时，会将添加的fade-enter去掉，并再添加一个fade-enter-to的class；再动画执行结束的时候，将这些class都去掉。所以我们在以上代码的基础上再加上以下代码，就可以看到明显的效果
给transtion一个name

<transition name="fade">
	<div v-if="show">hello world</div>
</transition>

设置fade-enter和fade-enter-active的样式：

<style>
	.fade-enter{
		opacity: 0;
	}
	.fade-enter-active{
		transition: opacity 3s;
	}
</style>

动画开始时，将元素的opactity设置成立0，所以自然元素页面是无法显示出元素内容，而在动画第二帧的时候，fade-enter这个class消失，元素原本的opacity为1，自然该显示出来，而fade-enter-active检测到这一变化，使它在3s中完成变化，也就有了过渡效果。

如果不给transtion设置name,vue默认的值是v，即v-enter,v-enter-active,v-enter-to

反之，如果是实现点击按钮使显示内容从隐藏状态到显示状态的过渡，流程如下：
在这里插入图片描述
只需在设置v-leave-to和v-leave-active的样式即可：

.v-leave-to{
	opacity: 0;
}
.v-leave-active{
	transition: opacity 3s;
}

综上我们可以看出，vue里面的CSS动画是通过某一时刻自动往标签上增加一些css样式来实现的。

在Vue中使用animate.css库

使用keyframes，在上面例子的基础上改变动画效果为放大缩小。只需设置style样式

<style>
	@keyframes bounce-in{
		0%{
			transform: scale(0);
		}
		50%{
			transform: scale(1.5);
		}
		100%{
			transform: scale(1);
		}
	}
	.v-enter-active{
		transform-origin: left center;
		animation:bounce-in 1s;
	}
	.v-leave-active{
		transform-origin: left center;
		animation:bounce-in 1s reverse;
	}
</style>

这里还涉及到一个知识点:不使用默认的class名称的方法
直接在transition上自定义class名称：

<transition enter-active-class="active" leave-active-class="leave">
	<div v-if="show">hello world</div>
</transition>

接下来介绍如何使用animate.css库，使用animate.css库之后，不需要自己再写keyframes的代码

1.首先我们需要了解链接: animate库.
2.下载并引入animate.css库
3.必须使用自定义class名字
4.必须包含animated这个具体的类

<transition enter-active-class="animated swing" leave-active-class="animated shake">
	<div v-if="show">hello world</div>
</transition>

animated表示要使用animate.css库里面的动画，后面需要再跟上具体的动画名称。

在Vue中同时使用过渡和动画

综合以上两个动画效果：

//style中
<style>
.v-enter,.v-leave-to{
	opacity: 0;
}
.v-enter-active,.v-leave-active{
	transition: opacity 3s;
}
</style>
//body中
<transition 
	appear//设置出场也有动画效果
	enter-active-class="animated swing v-enter-active" 
	leave-active-class="animated shake v-leave-active"
	appear-active-class="animated swing">
	<div v-if="show">hello world</div>
</transition>

但是这样存在一个问题：两者动画时长不同。究竟以哪一个的动画时长为准，可以使用type进行定义，比如：
在这里插入图片描述
也可以自定义一个动画总时长，使用duration：

还可以通过duration自定义不同情况下的效果时长，比如出场和入场效果：

Vue中的js动画与Velocity.js的结合

通过js的钩子实现
1.入场动画
通过@before-enter、@enter、@after-enter这三个钩子实现。
@before-enter 一个参数，设置动画开始前的样式
@enter 两个参数，设置动画开始样式以及命令动画结束
@after-enter 一个参数，设置动画结束后的样式

<div id="app">
	<transition name="fade"
	@before-enter="handllebeforeEnter"
	@enter="handleEnter"
	@after-enter="handleAfter">
		<div v-if="show">hello world</div>
	</transition>
	<button @click="handleClick">切换</button>
</div>
<script src="js/vue.js"></script>
<script>
	const app=new Vue({
		el:"#app",
		data:{
			show:true
			},
		methods:{
			handleClick:function(){
				this.show=!this.show
			},
			handllebeforeEnter:function(el){
				el.style.color='red'//动画之前
			},
			handleEnter:function(el,done){
				setTimeout(() =>{
					el.style.color='green'//执行动画时
				},2000)
				setTimeout(() =>{
					done()//动画结束
				},4000)//持续时长
			},
		    handleAfter:function(el){
					el.style.color="#000"
				}
			}
		})
</script>

2.出场动画
通过@before-leave、@leave、@after-leave这三个钩子实现。
@before-leave 一个参数，设置动画结束前的样式
@leave 两个参数，设置动画结束样式以及命令动画结束
@after-leave 一个参数，设置动画结束后的样式

3.使用velocity,js库
Velocity.js是一个功能强大的库，它的动画涵盖：

CSS动画属性的数值，包括颜色

Transform（变换）

SVG属性

滚动事件，相对于页面或页面中的容器元素

淡入淡出动画

一般来说，Velocity一次可以操控一个数值属性值的动画。
使用Velocity.js，首先需要进入Velocityjs的官网.下载它。
举个小例子：

<script>
	const app=new Vue({
		el:"#app",
		data:{
			show:true
			},
		methods:{
			handleClick:function(){
				this.show=!this.show
			},
			handllebeforeEnter:function(el){
				el.style.opacity=0;
				},
			handleEnter:function(el,done){
				Velocity(el,{
					opacity:1
					},{
					duration:1000,//设置动画时长
					complete:done//动画结束
					})
				},
			handleAfter:function(el){
				 console.log("动画结束")
				}
			}
		})
</script>

以上只是简单的例子，Velocity里面涉及到更多内容可以在官网上进行学习。
后面的部分涉及到组件内容，需要在学习组件之后再更新啦~

小太阳的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习-动画特效

Vue中的CSS动画（过渡动画）首先，我们先举一个小例子，实现一个简单的功能：点击按钮使显示内容从隐藏状态到显示状态的过渡。此处是通过v-if控制标签的显示与隐藏的，也可通过v-show来控制标签的显示与隐藏。<div id="app"> <transition> <div v-if="show">hello world</div> &l...
复制链接

扫一扫