VUE学习笔记--过渡与动画
作者：互联网
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/ 离开过渡。 条件渲染 (使用 v-if)。 条件展示 (使用 v-show)。 动态组件。 组件根节点。 语法格式如下： <transition name = "nameoftransition"> <div></div> </transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="demo">
<button v-on:click="show = !show">
点我
</button>
<transition name="fade">
<p v-if="show">动画实例</p>
</transition>
</div>
<script>
new Vue({
el: '#demo',
data: {
show: true
}
})
</script>
</body>
</html>
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理： 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删 除 CSS 类名。 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插 入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概 念不同)。
过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换： 对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是 这些类名的默认前缀。例如你使用了 <transition name="my-transition">，那么 v-enter 会替换 为 my-transition-enter。
常用的 Vue 过渡效果都是使用 CSS 过渡 transition。我们首先看一个简单的切换显示按 钮，代码如下：
<div id="app">
<button @click="show=!show">点我</button>
<div v-if="show">Hello world</div>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: opacity 3s;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<button @click="show=!show">点我</button>
<transition >
<div v-if="show">Hello world</div>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
当然只是这样也是无法形成过渡效果的。仍需在 transition 标签中添加 class 样式，只不过 class 样式不需要我们手动添加，Vue 在运行中会自动的构建一个动画的流程
当动画执行的一瞬间，会自动在 div 上增加两个 class 名字，分别是 fade-enter 和 fade-enter-active，因为 transiton 标签 name 是 fade。
当动画运行到第二帧时，Vue 又会把 fade-enter 删除，然后添加一个 fade-enter-to，再当动画执行到结束的一瞬间，又把 fade-enter-active 和 fade-enter-to 删除掉。
CSS动画animation用法同CSS过渡transition，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.bounce-enter-active{
animation:bounce-in .5s;
}
.bounce-leave-active{
animation:bounce-in .5s reverse;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">点我</button>
<transition name="bounce">
<p v-if="show">Hello World</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果使用其中任何一种，Vue 能自动识 别类型并设置监听。 在一些场景中，需要给同一个元素同时设置两种过渡动效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.fade-enter,.fade-leave-to{
opacity:0;
}
.fade-enter-active,.fade-leave-active{
transition:opacity 1s;
animation:bounce-in 5s;
}
@keyframes bounce-in{
0%{transform:scale(0);}
50%{transform:scale(1.5);}
100%{transform:scale(1);}
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="show = !show">点我</button>
<transition name="fade" type="transition">
<p v-if="show">Hello World</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true,
},
})
</script>
</body>
</html>
我们可以通过以下特性来自定义过渡类名： enter-class enter-active-class leave-class leave-active-class 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库， 如 Animate.css 结合使用十分有用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.fade-in-active, .fade-out-active{
transition: all 1.5s ease
}
.fade-in-enter, .fade-out-active{
opacity: 0
}
</style>
</head>
<body>
<div id="app">
<button @click="show = !show">
点我
</button>
<transition
name="fade"
enter-class="fade-in-enter"
enter-active-class="fade-in-active"
leave-class="fade-out-enter"
leave-active-class="fade-out-active"
>
<p v-show="show">hello</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
除了用CSS过渡的动画来实现Vue的组件过渡，还可以用JavaScript的钩子函数来实现，在钩子函数中直接操作DOM。可以在属性中声明 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" > <!-- ... --> </transition>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--
Velocity 和 jQuery.animate 的工作方式类似,也是用来实现 JavaScript 动画的一个很棒的选择
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">
点我
</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false"
>
<p v-if="show">
Hello
</p>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: false
},
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
})
</script>
</body>
</html>
标签：动画,VUE,el,--,Vue,fade,enter,active 来源： https://www.cnblogs.com/tszr/p/15416638.html