Vue 过渡动画 transition
<transition> > Vue的过渡动画效果
transition过渡动画 作用 的对象是 transition 标签节点下 DOM 元素的 显示和隐藏 过程
节点下 DOM 元素的 显示 过渡动画解析：
当一个元素在transition标签节点下的时候，该元素从隐藏转变为显示的过程中，transition会自动构建动画流程，在节点元素被执行之前，两个class类(fade-enter/fade-enter-active)被添加至节点元素。动画第一帧结束到第二帧，移除 fade-enter 并添加 fade-enter-to ，而在结束之前，则会移除 fade-enter-active和fade-enter-to
节点下 DOM 元素的 隐藏 过渡动画解析：
当一个元素在transition标签节点下的时候，该元素从显示转变为隐藏的过程中，transition会自动构建动画 隐藏 流程，在节点元素被执行之前，两个class类(fade-leave/fade-leave-active)被添加至节点元素。动画第一帧结束到第二帧，移除 fade-leave 并添加 fade-leave-to ，而在结束之前，则会移除 fade-leave-active和fade-leave-to
看了上面的解析，大体能总结为：
transition 在自动构建动画时，在指定的帧数上 创造或抹除了一些 类选择器
下面通过一个“按钮切换字幕 显示与隐藏 的过渡特效”实例来体验一波
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.v-enter, /* 添加 类选择器
.v-leave-to{ /* transition 没有命名时， 用前缀 ' v ' 代替 ' fade '
opacity:0;
}
.v-enter-active, /* 添加 类选择器
.v-leave-active{
transition:opacity 3s; /* 过渡效果 > opacity 的变化时间 3s 完成一个周期
}
</style>
</head>
<body>
<div id="app">
<transition> <!-- transition标签节点下会有一个过渡的效果
//第二帧 enter 第三帧 enter-active
-->
<div v-show="show">hello world</div> <!-- 使用transition过渡效果，节点下使用 v-show、v-if 控制显示和隐藏，都能实现效果-->
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(){
this.show =! this.show
}
},
})
</script>
</body>通过学习，transition 过渡动画还具备以下特点：
- 使用transition过渡效果，节点下使用 v-show、v-if 指令控制显示和隐藏，都能实现过渡效果
transition ：@keyframes + animation 实现更高级过渡效果
<style>
@keyframes bounce-in{ /* 定义关键帧 */
0%{
transform:scale(0); /* 尺寸为0 */
}
50%{
transform:scale(1.5); /* 尺寸为1.5倍 */
}
100%{
transform:scale(1); /* 尺寸为1 */
}
}
.fade-enter-active{ /* 以左线中心为基点 ; animation不能单独使用，必须配合@keyframes */
transform-origin:left center;
animation:bounce-in 3s; /* 匹配 bounce-in ，规定其3S完成一个动画周期 */
}
.fade-leave-active{
transform-origin:left center; /* 定义基准，即动态的中心 */
animation:bounce-in 3s reverse; /* 匹配 reverse：让动画反转 */
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(){
this.show =! this.show
}
},
})
</script>
</body>由上例，以前的文章讲过CCS动态指令 ' @keyframes + animation ' 的使用，这里再次总结
- animation不能单独使用，必须配合关键帧'@keyframes'使用
- @keyframes 定义 元素 如何去 动，animation 则 匹配 这一动态并赋予一些属性让其执行
- transform > CSS 动态指令
包括以下几种指令变化：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
- transform-origin:left center ： 定义基准，即动态的中心
- 该属性默认时，transform变化都是以元素自己中心（变形原点/中心点）位置进行变形的
- 定义后，规定元素沿着某一基点进行旋转、变化
Animate.css
Animate 动态库下载网址：
haorooms博客之Animate.css_前端博客_CSS3
引用：
与 'bootstrap' 等插件库的使用方式相同，下载后引用。
<link rel="stylesheet" href="./animate.css"/>使用：
在 <transition> 标签中 通过直接定义 类选择器 的方式 定义 animate库 及其 变化 的使用
- 类选择器 > 自动构建的 类选择器
- animate > 规定调用库写法为 " animated "
<transition enter-active-class="animated 动画" leave-active-class="animated 动画">实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="./animate.css"/>
</head>
<body>
<div id="app">
<transition name="fade" enter-active-class="animated flash" leave-active-class="animated bounceOutDown">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(){
this.show =! this.show
}
},
})
</script>
</body>Vue transition-JS动画
Vue 的 transition 提供了 几个 JS 动画钩子 ，通过这些 钩子，能够在元素的 显示/隐藏 过程中添加JS 动画
显示 过渡动画钩子：
before-enter > DOM 元素动画在执行之前被调用
函数有 1 个返回值：
el > transition 节点下的 DOM
enter > 当动画开始执行时，调用 enter 函数
函数有 2 个返回值：
el > transition 节点下的 DOM
done > 回调函数，当程序执行完毕，可手动调用回调函数
after-enter > 当 done 被调用，则调用该函数
函数有 1 个返回值：
el > transition 节点下的 DOM
隐藏 过渡动画钩子：
before-leave > DOM 元素动画在执行之前被调用
函数有 1 个返回值：
el > transition 节点下的 DOM
leave > 当动画开始执行时，调用 enter 函数
函数有 2 个返回值：
el > transition 节点下的 DOM
done > 回调函数，当程序执行完毕，可手动调用回调函数
after-leave > 当 done 被调用，则调用该函数
函数有 1 个返回值：
el > transition 节点下的 DOM
velocity.JS
应用：与其他JS插件相同，下载后引用
实例：Vue JS动画与velocity插件动画结合
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<script src="./velocity.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<transition @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
var vm =new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick:function(){
this.show =! this.show
},
handleBeforeEnter:function(el){
el.style.opacity =0; // 开始前 JS钩子 使 透明度为 0
},
handleEnter:function(el,done){
Velocity(el, // 参数1 > 动画作用对象 ；
{opacity:1},
{duration:3000,complete:done,}) //配置参数 complete > 当Velocity 动画执行完之后， complete属性的内容被执行，即执行done回调函数
},
handleAfterEnter:function(el){
console.log(2134)
},
},
})
</script>
</body>注：
- velocity动画库 在使用时 应首字母大写
- velocity提供了配置参数 complete ，当 Velocity 动画执行完后，complete 属性的内容被执行，通常结合 JS 钩子的 函调函数 done 使用
动画过渡
Vue中多个元素或组件的过渡动画效果实现一般通过：
- v-if 和 v-else 指令
使用时，需要给元素绑定 key > 这是为了 DOM 标签的复用问题。因为当通过 v-if/v-else 切换show值时，Vue会复用已经存在的DOM。
- component 动态组件
使用时，需要通过 v-bind:is=" " 绑定 动态对象
- mode=" in-out/ out-in "
mode > transition提供的过渡动画
列表动画过渡
<transition-group>
当节点下的 DOM 元素中含有 v-for 指令时，列表循环的每一个对象都添加过渡效果
动画封装
简单概括为两种形式：
组件 + CSS动画
组件 + JS动画(更推荐)
组件 + CSS动画
通过 transition过渡动画 提供的 6种 自动构建的类选择器 实现
特点：
- 外部V层只需要调用组件即可
- 动画的实现 通过 CSS样式的全局声明 及 组件间的组合
实例：
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<link rel="stylesheet" href="./animate.css"/>
<style>
.v-enter, .v-leave-to{
opacity:0;
}
.v-enter-active, .v-leave-active{
transition:opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="show">
<h2>hello world</h2>
</fade>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('fade',{ //对动画进行封装 (组件 + CSS动画)，任何调用子组件 fade 的 DOM，通过匹配都可以使用 template
props:['show'],
template:'<transition v-if="show"><slot></slot></transition>'
})
var vm =new Vue({
el:"#app",
data:{
show:false
},
methods:{
handleClick:function(){
this.show =! this.show
}
},
})
</script>
</body>组件 + JS动画
通过 transition过渡动画 提供的 6种 JS动画钩子 实现
特点：
- 外部V层只需要调用组件即可
- 动画的实现 全部在 组件 中定义完成，不需要外部定义样式
实例：
<body>
<div id="app">
<fade :show="show">
<div>hello world</div>
</fade>
<fade :show="false">
<h1>hello world</h1>
</fade>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('fade',{ //对动画进行封装 (组件 + JS动画) ，任何调用子组件 fade 的 DOM，通过匹配都可以使用 template
props:['show'],
template:'<transition @before-enter="handleBeforeEnter" @enter="handleEnter" v-if="show"><slot></slot></transition>',
methods:{
handleBeforeEnter:function(el){
el.style.color ='red'
},
handleEnter:function(el,done){
setTimeout(() => {
el.style.color ='green'
done()
},2000)
}
},
})
var vm =new Vue({
el:"#app",
data:{
show:false
},
methods:{
handleClick:function(){
this.show =! this.show
}
},
})
</script>
</body>
2560
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
