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>
标签:动画,Vue,封装,vue,components,active,hello From: https://www.cnblogs.com/ios9/p/17220408.html