Vue单元素/组件的过渡

2017-10-14 本文已影响9人 iqing2012

单元素/组件的过渡
Vue 提供了 transition的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡

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

这里是一个典型的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
            opacity: 0
        }
    </style>
    <script src="../vue.js"></script>
</head>
<body>
   <div id="app">
       <p><button @click="toggle(seen)">toggle</button></p>
       <transition name="fade">
           <p v-if="seen">hello vue</p>
       </transition>
   </div>
<script>
     var app=new Vue({
         el:'#app',
         data:{
             seen:true
         },
         methods:{
             toggle:function (seen) {
                 this.seen=!this.seen;
             }
         }
     })
</script>
</body>
</html>

当插入或删除包含在 transition组件中的元素时，Vue 将会做以下处理：

自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick
概念不同)

Vue单元素/组件的过渡

猜你喜欢

热点阅读