Vue.js动画 基础入门_动画使用攻略

组件的过渡条件的渲染(使用v-if)条件的展示(使用v-show)动态组件组件根节点链接地址下载:css过渡下面是一个运用css点击显示隐藏显示的2s动画效果: <

Vue.js动画 基础入门

组件的过渡

  • 条件的渲染(使用v-if)
  • 条件的展示(使用v-show)
  • 动态组件
  • 组件根节点

链接地址下载:

Vue.js动画 基础入门_动画使用攻略

<script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>

css过渡

下面是一个运用css点击显示隐藏显示的2s动画效果:

    <style>
        /* 离开进行中和开始进行中,设置了一个透明度的变化*/
        .fade-enter-active,.fade-leave-active{
          transition: opacity 2s;
        }
        /* 开始和结束前的时候,透明度为0,相当于把它给隐藏掉*/
        .fade-enter,.fade-leave-to{
          opacity: 0;
        }
    </style>
    
    <body>
      <div id="main">
        <button v-on:click="ok = !ok">点击</button>
        <transition name="fade">
          <p v-if="ok">vue动画课程</p>
        </transition>
      </div>
    </body>
    
    <script>
      var vm = new Vue({
        el: '#main',
        data: {
          ok: true
        }
      });
    </script>

过渡理解

当使用/删除包含在transition组件中的元素时,Vue将会做的处理:

  • 首先会先嗅探一下这个目标元素是否使用CSS过渡或动画,在使用的时候添加或者删除CSS类名。
  • 如果没有检测到这个CSS过渡或动画,DOM操作(插入或删除)会直接执行下一帧,而不会在这一帧继续执行。

过渡动画CSS的类名

  • v-enter,定义进入过渡的开始状态
  • v-enter-active,定义过渡的状态,在元素的整个过渡过程中作用,在元素被插入时生效,在transition/animation完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  • v-enter-to,定义进入过渡的结束状态,在元素被插入一帧后生效(与此同时v-enter被删除),在transition/animation完成之后移除。
  • v-leave,定义离开过渡的开始状态,在离开过渡被触发时生效,在下一个帧移除。
  • v-leave-active,定义过渡的状态,在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在transition/animation完成之后移除,这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  • v-leave-to,定义离开过渡前的结束状态,在离开过渡被触发一帧后生效(与此同时v-leave被删除),在transition/animation完成之后移除。
海计划公众号
(0)
上一篇 2020/03/24 05:42
下一篇 2020/03/24 05:42

您可能感兴趣的内容