vuebase-5.过渡和动画

Posted 2022-06-26 xiao-peng-ji

动画的方案：

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>