Vue封装的过度与动画
1:知识点：
## Vue封装的过度与动画
1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。
2. 图示：<img src="https://img04.sogoucdn.com/app/a/100520146/5990c1dff7dc7a8fb3b34b4462bd0105" style="width:60%" />
3. 写法：
1. 准备好样式：
- 元素进入的样式：
1. v-enter：进入的起点
2. v-enter-active：进入过程中
3. v-enter-to：进入的终点
- 元素离开的样式：
1. v-leave：离开的起点
2. v-leave-active：离开过程中
3. v-leave-to：离开的终点
2. 使用```<transition>```包裹要过度的元素，并配置name属性：
```vue
<transition name="hello">
<h1 v-show="isShow">你好啊！</h1>
</transition>
```
3. 备注：若有多个元素需要过度，则需要使用：```<transition-group>```，且每个元素都要指定```key```值。2、界面效果
3、代码说明：
3-1、代码结构：
3-2、main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
// 创建Vm
const vm = new Vue( {
el:'#app',
render: (h) => h(App),
//添加全局事件总线对象
beforeCreate(){
Vue.prototype.$bus=this;
}
});3-3、App.vue
<template>
<div id="root">
<hr>
<span>Test</span>
<Test />
<hr>
<span>Test1</span>
<Test1 />
<hr>
<span>Test2</span>
<Test2 />
<hr>
<span>Test3</span>
<Test3 />
</div>
</template>
<script>
import Test from './components/Test.vue';
import Test1 from './components/Test1.vue';
import Test2 from './components/Test2.vue';
import Test3 from './components/Test3.vue';
export default {
name: 'App',
components: { Test,Test1,Test2,Test3 }
}
</script>
3-4、Test.vue
<<template>
<div >
<button @click="isShow = !isShow " x>显示/隐藏</button> <!-- x 该段代码表示：界面加载后就显示动画效果 或者： ：x="true"-->
<!--transition 里面只能使用1个元素 transition-group 里面可以使用一组（多个）元素 -->
<transition name="hello" appear mode=""> <!--:appear="true" 该段代码表示：界面加载后就显示动画效果 或者: appear -->
<h1 v-show="isShow" > 你好啊 ！</h1>
</transition>
</div>
</template>
<script>
export default {
/* 组件名 */
name: 'Test',
/* mixin(混入) */
mixins: [],
/* 配置声明子组件 */
components: {},
/* 组件间数据、方法传值接收区 */
props: [],
/* 数据对象：数据赋值声明 */
data () {
return {
isShow:true
}
},
/* 计算属性：计算区 */
computed: {},
/* 检测区 */
watch: {},
/* */
created () {},
/* 挂载区 */
mounted () {},
/* 方法区 */
methods: {}
}
</script>
<style scoped lang="less">
h1{
background-color:orange;
}
// 切入动画 1秒钟
.hello-enter-active{
animation: moveVide 0.5s linear ;
}
// 切出动画
.hello-leave-active{
animation: moveVide 0.5s linear reverse;
}
// 定义动画事件
@keyframes moveVide{
from {
transform:translateX(-100%);
}
to{
transform:translateX(0px);
}
}
</style>
3-5、Test1.vue
<<template>
<div >
<button @click="isShow = !isShow " x>显示/隐藏</button> <!-- x 该段代码表示：界面加载后就显示动画效果 或者： ：x="true"-->
<!--transition 里面只能使用1个元素 transition-group 里面可以使用一组（多个）元素 -->
<transition-group name="hello" appear mode=""> <!--:appear="true" 该段代码表示：界面加载后就显示动画效果 或者: appear -->
<h1 v-show="isShow" key="1"> 你好啊 ！</h1>
<h1 v-show="isShow" key="2"> Vue 世界 ！</h1>
</transition-group>
</div>
</template>
<script>
export default {
/* 组件名 */
name: 'Test1',
/* mixin(混入) */
mixins: [],
/* 配置声明子组件 */
components: {},
/* 组件间数据、方法传值接收区 */
props: [],
/* 数据对象：数据赋值声明 */
data () {
return {
isShow:true
}
},
/* 计算属性：计算区 */
computed: {},
/* 检测区 */
watch: {},
/* */
created () {},
/* 挂载区 */
mounted () {},
/* 方法区 */
methods: {}
}
</script>
<style scoped lang="less">
h1{
background-color:orange;
}
// 切入动画 1秒钟
.hello-enter-active{
animation: moveVide 0.5s linear ;
}
// 切出动画
.hello-leave-active{
animation: moveVide 0.5s linear reverse;
}
// 定义动画事件
@keyframes moveVide{
from {
transform:translateX(-100%);
}
to{
transform:translateX(0px);
}
}
</style>
3-6、Test2.vue
<<template>
<div >
<button @click="isShow = !isShow " x>显示/隐藏</button> <!-- x 该段代码表示：界面加载后就显示动画效果 或者： ：x="true"-->
<!--transition 里面只能使用1个元素 transition-group 里面可以使用一组（多个）元素 -->
<transition name="hello" appear mode=""> <!--:appear="true" 该段代码表示：界面加载后就显示动画效果 或者: appear -->
<h1 v-show="isShow" key="1"> 你好啊 ！</h1>
</transition>
</div>
</template>
<script>
export default {
/* 组件名 */
name: 'Test2',
/* mixin(混入) */
mixins: [],
/* 配置声明子组件 */
components: {},
/* 组件间数据、方法传值接收区 */
props: [],
/* 数据对象：数据赋值声明 */
data () {
return {
isShow:true
}
},
/* 计算属性：计算区 */
computed: {},
/* 检测区 */
watch: {},
/* */
created () {},
/* 挂载区 */
mounted () {},
/* 方法区 */
methods: {}
}
</script>
<style scoped lang="less">
h1{
background-color:orange;
}
// 切入动画 进入的起点 , 切出动画 离开的终点
.hello-enter,.hello-leave-to{
animation: translateX(-100%) ;
}
.hello-enter-active,.hello-leaver-active{
transition: 0.5s linear ;
}
// 切入动画 进入的终点 ,切出动画 离开的起点
.hello-enter-to , .hello-leave {
animation: translateX(0);
}
</style>
3-7、Test3.vue
<!--
引入 css 动画类库： animate.style
-->
<<template>
<div >
<button @click="isShow = !isShow " x>显示/隐藏</button> <!-- x 该段代码表示：界面加载后就显示动画效果 或者： ：x="true"-->
<!--transition 里面只能使用1个元素 transition-group 里面可以使用一组（多个）元素 -->
<transition-group
appear
name="animate__animated animate__bounce"
enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"
> <!--:appear="true" 该段代码表示：界面加载后就显示动画效果 或者: appear -->
<h1 v-show="!isShow" key="1"> 你好啊 ！</h1>
<h1 v-show="isShow" key="2"> Vue 世界 ！</h1>
</transition-group>
</div>
</template>
<script>
// 引入CSS 样式库
import 'animate.css'
export default {
/* 组件名 */
name: 'Test3',
/* mixin(混入) */
mixins: [],
/* 配置声明子组件 */
components: {},
/* 组件间数据、方法传值接收区 */
props: [],
/* 数据对象：数据赋值声明 */
data () {
return {
isShow:true
}
},
/* 计算属性：计算区 */
computed: {},
/* 检测区 */
watch: {},
/* */
created () {},
/* 挂载区 */
mounted () {},
/* 方法区 */
methods: {}
}
</script>
<style scoped lang="less">
h1{
background-color:orange;
}
</style>
<!--
/**
安装 animate.css
npm install animate.css
PS E:\Vue_demo\VueCli\vue_test> npm install animate.css
added 1 package in 14s
PS E:\Vue_demo\VueCli\vue_test>
**/
-->
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
转载请标注出处！
