vuebase-5.过渡和动画

动画的方案：

1.在 CSS 过渡和动画中自动应用 class

2.可以配合使用第三方 CSS 动画库，如 Animate.css

3.在过渡钩子函数中使用 JavaScript 直接操作 DOM

4.可以配合使用第三方 JavaScript 动画库，如 Velocity.js

-----------

实现动画的元素必须脱离文档流

过渡的类名：

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

App.vue

<template>
<div id="app">
<img src="./assets/logo.png">
<!-- <HelloWorld/> -->
<Parent />
<!-- <Music/> -->
<slotDemo>
<!-- <div>hello插槽</div>
<template slot="v1">
<div class="v1">{{slotParentmsg}}</div>
</template>
<template slot="v2">
<div class="v1">v2内容</div>
</template> -->
<div slot-scope="slotparents"><h2>{{slotparents.msgs}}</h2></div>
</slotDemo>
<animtes></animtes>
</div>
</template>

<script>
/* import HelloWorld from ‘./components/HelloWorld‘ */
import Parent from ‘./components/parent‘
import Music from ‘./components/music‘
import slotDemo from ‘./components/slotDemo‘
import animtes from ‘./components/animtes‘
export default {
name: ‘App‘,
components: {
Parent,
Music,
slotDemo,
animtes
},
data(){
return{
slotParentmsg:"插槽的动态内容"
}
},
methods:{

}
}
</script>

<style>
#app {
font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

animtes.vue-----------------------------------------------------------------------------------------------------------

<template>
<div class="animtes">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
<button v-on:click="flag = !flag" style="display:block;width:200px;margin:0 auto;">
NewToggle按钮
</button>
<transition name="ve">
<p v-if="flag">hello NewToggle</p>
</transition>
<button v-on:click="flag1 = !flag1" style="display:block;width:200px;margin:0 auto;">
NewTogglecss按钮
</button>
<transition name="custom-classes-transition"
enter-active-class="animated rollIn"
leave-active-class="animated zoomInUp">
<p class="ves" v-if="flag1">ves NewToggle 11111</p>
</transition>
<p></p>
<button v-on:click="flag2 = !flag2" style="display:block;width:200px;margin:0 auto;">
NewTogglecss按钮flag2
</button>
<transition name="vesf">
<p class="ves" v-if="flag2">ves NewToggleflag2 11111</p>
</transition>
</div>
</template>

<script>
export default {
name: "animtes",
data() {
return {
show: true,
flag:true,
flag1:true,
flag2:true
}
},
methods: {

}
}
</script>

<style lang="css" scoped>
/* .fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}

.fade-enter,
.fade-leave-to

{
opacity: 0;
} */
/* .fade-leave-active below version 2.1.8 */
/* 0的状态*/
.ve-enter,
.ve-leave-to{
opacity: 0;
}
/* 1的状态*/
.ve-enter-to,
.ve-leave{
opacity: 1;
}
/* 过渡*/
.ve-enter-active,
.ve-leave-active{
transition:opacity 0.5s;
}

.ves{
width:200px;
height:200px;
background-color:red;
text-align:center;
font-size:20px;
}
/* 0的状态*/
.ves-enter,
.ves-leave-to{
opacity: 0;
width:0;
height:0;
}
/* 1的状态*/
.ves-enter-to,
.ves-leave{
opacity: 1;
height:200px;
width:200px;
}
/* 过渡*/
.ves-enter-active,
.ves-leave-active{
transition:all 1s;
}
/* ***********************************vesf********************************/
/* 0的状态*/
.vesf-enter,
.vesf-leave-to{
}
/* 1的状态*/
.vesf-enter-to,
.vesf-leave{
}
/* 过渡*/
.vesf-enter-active{
animation:bounce-in 0.5s;
}
.vesf-leave-active{
animation:bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
@keyframes bounce-out {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(0);
}
}
</style>

原文地址：https://www.cnblogs.com/xiao-peng-ji/p/11331248.html