Vue2.x学习四：过渡&动画
Vue 在插入、更新或者移除 DOM 时，提供多种不一样方式的应用过渡效果。javascript
请注意它的应用场景
并非说咱们写了一个动画以后让它一直在动，而是在一个模块显示或隐藏的时候去作一种特效，使得它的过程有过渡性，而不是很突兀的直接消失或显示。
它适用的场景是v-if和v-show，动态组件，组件根节点。css
具体实现有如下几种方式：
1）在 CSS 过渡和动画中自动应用 class
2）能够配合使用第三方 CSS 动画库，如 Animate.css
3）在过渡钩子函数中使用 JavaScript 直接操做 DOM
4）能够配合使用第三方 JavaScript 动画库，如 Velocity.jshtml
下面咱们经过一个例子来学习：vue
<body>
<div class="container">
<!-- 为按钮绑定事件 -->
<button @click="show">显示</button>
<button @click="hide">隐藏</button>
<!-- 在vue中实现动态的显示与隐藏 -->
<!-- v-if和v-show均可以，二者是有区别的
v-show：当咱们点击隐藏时，下面的div.block还在，只是它的display为none
v-if:当咱们点击隐藏时，下面的div.block整个都没有了，说明它从咱们的dom文档结构中去掉了，
当咱们显示时，它还会再建立一个dom元素插进去
由此咱们能够比较v-if和v-show的效率：
若是这个东西要频繁的显示隐藏，那么咱们选择v-show，这样能够减小建立一个dom的代价
若是二者切换的频度比较低(好比登录注册)，那么咱们选择v-if
-->
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
//定义它是否显示，默认状况下为false隐藏
isShow:false,
},
//在其中定义显示与隐藏两个方法
methods:{
// 要想动态的实现显示与隐藏，咱们只要动态的改变isShow的状态
show(){
this.isShow=true;//当isShow为真，显示
},
hide(){
this.isShow=false;//当isShow为假，隐藏
}
}
});
</script>
</body>
它还有一种简便写法java
<body>
<div class="container">
<!--
isShow=!isShow 新值是老值的取反,即
若是isShow为true,那么再次点击的时候isShow为false
这种较为简单不须要写函数
-->
<button @click="isShow=!isShow">切换</button>
<!-- 为须要动画特效的部分加transition标签 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
咱们能够看到，上面显示与隐藏的方式过于直接，此时咱们能够为它建立动画效果。jquery
css过渡
隐藏与显示的效果实现以后，咱们来建立动画。
哪一个部分要动态的显示与隐藏，咱们给哪一个部分加<transition></transition>。
而后咱们为它加特效。git
加特效以前咱们要知道，元素从开始显示到彻底显示，开始隐藏到彻底隐藏也要经历一些阶段，咱们能够在这之中加入一些样式，就能达到一些效果。
咱们能够经过一张图来讲明：
github
v-enter：定义进入过渡的开始状态。在元素被插入以前生效，在元素被插入以后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入以前生效，在过渡/动画完成以后移除。这个类能够被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 定义进入过渡的结束状态。在元素被插入以后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成以后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时马上生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时马上生效，在过渡/动画完成以后移除。这个类能够被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发以后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成以后移除。app
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<!-- 为显示和隐藏的过程提供样式定义 -->
<style type="text/css">
/*开始显示*/
.v-enter{ opacity: 0; }
/*显示过程*/
.v-enter-active{ transition: opacity 1.5s;/*给transition加过渡特效(属性),持续时间为1.5秒*/ }
/*显示完毕*/
.v-enter-to{ opacity: 1; }
/*开始隐藏*/
.v-leave{ opacity: 1; }
/*隐藏过程*/
.v-leave-active{ transition: opacity 1.5s; }
/*隐藏完毕*/
.v-leave-to{ opacity: 0; }
</style>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切换</button>
<!-- 为须要动画特效的部分加transition标签 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
css动画
至关于将css中的动画机制运用到vue中dom
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<style type="text/css">
/*只在显示与隐藏的过程当中定义动画,实现过渡效果*/
.v-enter-active {
animation-name: app;/*指定动画名称*/
animation-duration: 3s;/*定义时间*/
}
.v-leave-active {
animation-name: app;
animation-duration: 3s;
animation-direction: reverse;/*动画反向播放*/
}
/*定义动画效果*/
@keyframes app {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切换</button>
<!-- 为须要动画特效的部分加transition标签 -->
<transition>
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
咱们有的时候可能不太能写好keyframes，这个时候咱们能够引用别人封装好的动画库，那么咱们本身就不用写keyframes了。
下面咱们来看看如何在vue中引入animate.css动画库。
css动画库
上面两种方式，咱们只是为特效元素添加transition标签包裹，
而这种动画库的实现方式，咱们须要为transition标签添加属性
vue中为咱们提供了6个标签：
enter-class、enter-active-class、enter-to-class
leave-class、leave-active-class、leave-to-class
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其余第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切换</button>
<!--
在transition标签中添加属性
enter-active-class="animated bounceIn":自定义过渡类名="animated(基础样式) css库中已有样式"
Animate.css官网:https://daneden.github.io/animate.css/
-->
<transition enter-active-class="animated bounceIn" leave-active-class="animated fadeOut">
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
}
});
</script>
</body>
</html>
js动画库
这里咱们用到了JavaScript 钩子。
它有如下几种钩子：
<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <div>要显示的内容</div> </transition>
用法是在transition绑定函数，并在methods中定义
methods: {
// 进入
beforeEnter: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// 离开
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
实现动画的方式有2种，一种是jquery，一种是velocity。
此处咱们以velocity为例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>animate</title>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 如下两个是js动画库 velocity
velocity.js:提供动画机制
velocity.ui,js:提供动画组件
-->
<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.2/velocity.ui.min.js"></script>
</head>
<body>
<div class="container">
<button @click="isShow=!isShow">切换</button>
<!-- 为transition绑定事件 -->
<transition @enter="enter">
<div class="block" v-show="isShow" style="width:100px;height:100px;background-color:skyblue">
{{msg}}
</div>
</transition>
</div>
<script type="text/javascript">
new Vue({
el:'.container',
data:{
msg:'hello',
isShow:false,
},
methods:{
// 事件由vue来调用,它会给咱们传两个参数:el(当前元素),done(函数执行完以后的回调)
enter(el,done){
//console.log(el);//[object HTMLDivElement]
//console.log(done);//function () {...}
/*
Velocity(要控制的元素,{动画样式},{动画配置})
动画样式,能够在http://www.mrfront.com/docs/velocity.js/plugins.html内置特效中寻找
*/
Velocity(el,"transition.fadeIn",{
// 动画配置项
duration:1000, //动画执行时间(单位毫秒)
complete:done // 动画结束时的回调函数,必需要写
/*其余参数
easing: "swing", // 缓动效果
queue: "", // 队列
begin: undefined, // 动画开始时的回调函数
progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发）
display: undefined, // 动画结束时设置元素的 css display 属性
visibility: undefined, // 动画结束时设置元素的 css visibility 属性
loop: false, // 循环
delay: false, // 延迟
mobileHA: true // 移动端硬件加速（默认开启）
*/
});
}
}
});
</script>
</body>
</html>
相关文章
- 1. Android过渡动画学习
- 2. VUE2 第五天学习--过渡效果
- 3. Vue 学习11——Vue过渡与动画
- 4. ☀【动画】过渡 transition
- 5. vue 过渡 动画
- 6. Activity过渡动画
- 7. css3动画过渡
- 8. vue-过渡动画
- 9. vue_过渡_动画
- 10. React 过渡 动画
- 更多相关文章...
- • jQuery Mobile 过渡 - jQuery Mobile 教程
- • ionic 加载动画 - ionic 教程
- • Tomcat学习笔记（史上最全tomcat学习笔记）
- • 适用于PHP初学者的学习线路和建议
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Android过渡动画学习
- 2. VUE2 第五天学习--过渡效果
- 3. Vue 学习11——Vue过渡与动画
- 4. ☀【动画】过渡 transition
- 5. vue 过渡 动画
- 6. Activity过渡动画
- 7. css3动画过渡
- 8. vue-过渡动画
- 9. vue_过渡_动画
- 10. React 过渡 动画