首页 > 其他分享 >Vue封装的过度与动画

Vue封装的过度与动画

时间:2023-03-15 22:24:16浏览次数:47  
标签:动画 Vue 封装 vue components active hello

Vue封装的过度与动画



1:知识点:


image



## 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、界面效果

1





3、代码说明:


3-1、代码结构:


image


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

相关文章

  • Vue.js 计算属性(p18~p20)
    视频18视频19视频20姓名案例_插值语法实现<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>姓名案例_插值语法实现</title> <!--引入Vue-->......
  • Vue.js 事件处理-事件修饰符
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>事件修饰符</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/vue.j......
  • Vue.js 事件处理-事件的基本使用v-on传参
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>事件的基本使用</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/v......
  • vue的路由实现及sass
    day27vue的路由实现及sass路由前端路由根据对应的url地址来渲染不同的内容前端路由的分类页面路由(通过页面的跳转来完成对应的切换(刷新页面))hash路由(通过对应的......
  • Vue模板语法 && 数据绑定
    模板语法Vue模板语法包括两大类插值语法功能:用于解析标签体内容。写法:{{xxx}},xxx是js表达式,可以直接读取倒data中所有区域。指令语法功能:用于解析标签(包括:标签属性......
  • vue中 给企业微信自建应用授权(静默授权,手动授权,扫码授权)
    在web开发中,会遇到通过企业微信授权的形式进行免登录或快速登录的需求。如果该应用是企业微信自建应用,那可以在管理平台获取到相应的appId和agentid等必要参数。企业微信......
  • 孤狼老师-接口测试自动化(Python版完整版-接口封装
       高内聚,低耦合; 把GET和Post方法封装:       getattr:   ......
  • Vue.js 数据代理-回顾Object.defineProperty方法
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>回顾Object.defineproperty方法</title> </head> <body> <scripttype="text/javascript"......
  • 常用的Vue富文本编辑器:
     Quill:Quill是一个现代化、可定制的富文本编辑器,提供了许多有用的功能,如文本样式、列表、媒体插入等。在Vue中可以使用vue-quill-editor来集成Quill。CKEditor5:CKE......
  • Vue.js 数据绑定
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>数据绑定</title> <!--引入Vue--> <scripttype="text/javascript"src="../js/vue.js"......