zoukankan      html  css  js  c++  java
  • VUE—— transition(过渡&动画)的简单使用

    对要使用动画的组件或者模块包上一层transition标签,

    <transition name="fade">
       <p v-if="show">hello</p>
    </transition>

    name是自己命名的class的名称,用来写动画样式,如果不写name  则默认是v
    对应样式名称如下:写样式的时候,v的地方要改fade.
    如:
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
      opacity: 0;
    }

    class 具体含义如下:

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

    拓展:结合animate.css使用
    首先要下载animate的库,请在  animate.css 网站上自行下载
    然后 在main.js中引用 ,请依照自己的路径

    import "./common/animate.css";

    组件部分:

    < transition
    mode= "out-in"
    name= "custom"
    enter-active-class= "animated rollIn"
    leave-active-class= "animated rollOut" >
    < div class= "box" v-if="show" >Hello world </ div >
    </ transition >

    参考---https://blog.csdn.net/qq_36111804/article/details/80858826?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control

  • 相关阅读:
    2020.11.17
    2020.11.26
    2020.11.18
    2020.12.01
    2020.11.23
    Java编程规范
    20201003 千锤百炼软工人
    2020081920200825 千锤百炼软工人
    20201004 千锤百炼软工人
    20200929 动手动脑
  • 原文地址:https://www.cnblogs.com/pwindy/p/14788750.html
Copyright © 2011-2022 走看看