美文网首页
过渡动画:三种实现方法

过渡动画:三种实现方法

作者: coffee1949 | 来源:发表于2019-06-02 20:32 被阅读0次

1.在进入/离开的过渡中,会有 6 个 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 被删除),在过渡/动画完成之后移除。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scope</title>
    <script type="text/javascript" src="vue.js"></script>
    <style type="text/css">
        /* 
            第二步:
            定义类即可
            hello-enter
            hello-enter-active
            hello-enter-to

            hello-leave
            hello-leave-active
            hello-leave-to
         */
        .hello-enter,.hello-leave{
            opacity: 0;
        }
        .hello-enter-active,.hello-leave-active{
            transition: all 2s;
        }

    </style>
</head>
<body>
    <div id="app">
        <button @click="show=!show">toggle</button>
        
        <!-- 第一步:用transition包裹要过渡的元素,并给transition定义一个name属性 -->
        <transition name='hello'>
            <p v-if='show'>hello,world!</p>
        </transition>
    </div>
    
    <script type="text/javascript">
        var app = new Vue({
            data: {
                show: false
            }
        }).$mount('#app');


    </script>
</body>
</html>

2.使用第三方库:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 第一步:引入第三方库,这里使用animate.css -->
    <link rel="stylesheet" href="http://unpkg.com/animate.css">
</head>
<body>
    <div id="app">
        <button @click="show=!show">toggle</button>
        
        <!-- 第二步: 使用transition包裹过渡元素 -->
                <!-- 注意一般是enter-active-class 或 leave-active-class -->
        <transition enter-active-class="animated bounce">
            <p v-if='show'>hello,world!</p>
        </transition>
    </div>
    
    <script type="text/javascript">
        var app = new Vue({
            data: {
                show: false
            }
        }).$mount('#app');


    </script>
</body>
</html>

3.使用JavaScript 钩子进行控制(js库: velocity.js)

文档:https://cn.vuejs.org/v2/guide/transitions.html#JavaScript-%E9%92%A9%E5%AD%90

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>



methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

注意:
当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

好玩的过渡模式

文档:https://cn.vuejs.org/v2/guide/transitions.html#%E8%BF%87%E6%B8%A1%E6%A8%A1%E5%BC%8F

相关文章

网友评论

      本文标题:过渡动画:三种实现方法

      本文链接:https://www.haomeiwen.com/subject/pbhfxctx.html