Vue之过渡动画（一）

3.1、进入/离开 & 列表过渡

1. Overview

1. Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM.
2. On this page, we’ll only cover **entering, leaving, **and list transitions, but you can see the next section for managing state transitions.

DOM操作时的过渡效果，让页面更丝滑。

2. 单元素/组件的过渡

先来个demo开开胃，完整代码

<style>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>

<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>

2.1 过渡的类名（Transition Classes）

There are six classes applied for enter/leave transitions.

enter/leave过渡中，会有6个class切换

• v-enter
• v-enter-active
• v-enter-to (2.1.8+)
• v-leave
• v-leave-active
• v-leave-to (2.1.8+)

2.2 CSS过渡

即给上面例子中的 .fade-enter-active, .fade-leave-active 这些类名应用的CSS样式

2.3 CSS动画

写法差不多，就是把transition换成animation 完整代码

<style>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>
<script>
    new Vue({
        el: '#example-2',
        data: {
            show: true
        }
    })
</script>

2.4 自定义过渡的类名

我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

如下与 Animate.css的结合使用：完整代码

<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

<script>
  new Vue({
    el: '#example-3',
    data: {
      show: true
    }
  })
</script>

2.5 同时使用过渡和动画

要同时使用过渡和动画，要用type属性指明类型：animation or transition

2.6 指定过渡的时间

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

2.7 JavaScript钩子（JavaScript Hooks）

用js代码操作动画
如下使用了Velocity.js动画库，完整代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="example-4">
  <button @click="show = !show">
    Toggle
  </button>
  <transition
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
    v-on:leave="leave"
    v-bind:css="false"
  >
    <p v-if="show">
      Demo
    </p>
  </transition>
</div>

<script>
    new Vue({
        el: '#example-4',
        data: {
            show: false
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            enter: function (el, done) {
                Velocity(el, {opacity: 1, fontSize: '1.4em'}, {duration: 300})
                Velocity(el, {fontSize: '1em'}, {complete: done})
            },
            leave: function (el, done) {
                Velocity(el, {translateX: '15px', rotateZ: '50deg'}, {duration: 600})
                Velocity(el, {rotateZ: '100deg'}, {loop: 2})
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, {complete: done})
            }
        }
    })
</script>

3. 初始渲染的过渡（Transitions on Initial Render）

If you also want to apply a transition on the initial render of a node, you can add the appear attribute:

一个DOM节点初始化渲染到页面时可以引用过渡效果

<transition appear>
  <!-- ... -->
</transition>

// 【还自定义class】
<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

// 【也可以自定义js钩子】
<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

4. 多个元素之间的过渡（Transitioning Between Elements）

一个常见的场景就是：渲染列表元素时，如果列表是空的，则渲染一个代表空列表的元素

<transition>
  <table v-if="items.length > 0">
    <!-- ... -->
  </table>
  <p v-else>Sorry, no items found.</p>
</transition>

需要注意：如果两个tag名一样的元素之间做过渡时，要加key demo如下：

<style>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
</style>
<div id="app">
    <transition name="bounce">
        <button v-bind:key="docState">
            {{ buttonMessage }}
        </button>
    </transition>
    <button @click="savebutton">切换按钮</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            docState: 'saved'
        },
        computed:{
            buttonMessage: function () {
                switch (this.docState) {
                    case 'saved': return 'Edit'
                    case 'edited': return 'Save'
                }
            }
        },
        methods: {
            savebutton:function () {
                if(this.docState == 'edited'){
                    this.docState = 'saved'
                }else {
                    this.docState = 'edited'
                }

            }
        }
    })
</script>

完整代码

4.1 过渡模式

可以设置两种过渡模式：

• in-out: New element transitions in first, then when complete, the current element transitions out.

• out-in: Current element transitions out first, then when complete, the new element transitions in.

我们来对比下设置了out-in模式和不设置的区别吧：给上面例子上的transition加上mode属性为out-in

 <transition name="bounce" mode="out-in">
   <button v-bind:key="docState">
     {{ buttonMessage }}
   </button>
 </transition>

加之前：

加之后：效果棒棒哒

5. 多个组件之间的过渡

组件之间的过渡更加简单，写法和元素一样，不需要加key：

<style>
  .component-fade-enter-active, .component-fade-leave-active {
    transition: opacity .3s ease;
  }
  .component-fade-enter, .component-fade-leave-to
  /* .component-fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
</style>

<div id="app">
    <input type="radio" value="v-a" id="a" name="view" @change="view='v-a'">
    <label for="a">A</label>

    <input type="radio" value="v-b" id="b" name="view" @change="view='v-b'">
    <label for="b">B</label>
    <transition name="component-fade" mode="out-in">
        <component v-bind:is="view"></component>
    </transition>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            view: 'v-a'
        },
        components: {
            'v-a': {
                template: '<div>Component A</div>'
            },
            'v-b': {
                template: '<div>Component B</div>'
            }
        }
    })
</script>

完整代码

6. 列表过渡（List Transitions）

列表的Entering/Leaving过渡、Move Transitions移动过渡，用<transition-group>
有几个注意点：

• 渲染时会转换为实际元素，默认为span，可以加tag标签指定，如下例子中指定为 tag='p'
• 的内部元素上要加key
• css过渡类是应用在内部元素上的，而不是 group/container itself.

6.1 List Entering/Leaving Transitions

<style>
  .list-complete-item {
    transition: all 1s;
    display: inline-block;
    margin-right: 10px;
  }

  .list-complete-enter, .list-complete-leave-to
  /* .list-complete-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateY(30px);
  }
  .list-complete-leave-active {
    position: absolute;
  }
</style>

<div id="list-demo">
    <button v-on:click="shuffle">Shuffle</button>
    <button v-on:click="add">Add</button>
    <button v-on:click="remove">Remove</button>

    <transition-group name="list-complete" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-complete-item">
      {{ item }}
    </span>
    </transition-group>
</div>

<script>
    new Vue({
        el: '#list-demo',
        data: {
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            nextNum: 10
        },
        methods: {
            randomIndex: function () {
                return Math.floor(Math.random() * this.items.length)
            },
            add: function () {
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
            },
            remove: function () {
                this.items.splice(this.randomIndex(), 1)
            },
            shuffle: function () {
                this.items = _.shuffle(this.items)
            }
        }
    })
</script>

完整代码

6.2 List Move Transitions

上面演示了列表内元素进入/离开时的过渡效果，
为了列表中元素移动时的过渡效果，vue引入了v-move过渡类名，如下的：.flip-list-move

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
<style>
	.flip-list-move {
  	transition: transform 1s;
	}
</style>
<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

<script>
  new Vue({
    el: '#flip-list-demo',
    data: {
      items: [1,2,3,4,5,6,7,8,9]
    },
    methods: {
      shuffle: function () {
        this.items = _.shuffle(this.items)
      }
    }
  })
</script>

完整代码

6.3 列表使用Javascript钩子函数添加过渡效果

上面讲的都是列表用css进行过渡，列表也可以用js代码进行过渡，如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id="staggered-list-demo">
    <input v-model="query">
    <transition-group
            name="staggered-fade"
            tag="ul"
            v-bind:css="false"
            v-on:before-enter="beforeEnter"
            v-on:enter="enter"
            v-on:leave="leave"
    >
        <li
                v-for="(item, index) in computedList"
                v-bind:key="item.msg"
                v-bind:data-index="index"
        >{{ item.msg }}
        </li>
    </transition-group>
</div>

<script>
    new Vue({
        el: '#staggered-list-demo',
        data: {
            query: '',
            list: [
                { msg: 'Bruce Lee' },
                { msg: 'Jackie Chan' },
                { msg: 'Chuck Norris' },
                { msg: 'Jet Li' },
                { msg: 'Kung Fury' }
            ]
        },
        computed: {
            computedList: function () {
                var vm = this
                return this.list.filter(function (item) {
                    return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
                })
            }
        },
        methods: {
            beforeEnter: function (el) {
                el.style.opacity = 0
                el.style.height = 0
            },
            enter: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                        el,
                        { opacity: 1, height: '1.6em' },
                        { complete: done }
                    )
                }, delay)
            },
            leave: function (el, done) {
                var delay = el.dataset.index * 150
                setTimeout(function () {
                    Velocity(
                        el,
                        { opacity: 0, height: 0 },
                        { complete: done }
                    )
                }, delay)
            }
        }
    })
</script>

完整代码

7. 可复用的过渡

To create a reusable transition, all you have to do is place a <transition> or <transition-group>

组件的过渡也也可以不用，相当于一个壳子，壳子上带着过渡效果，你可以复用到别的地方

8. 动态过渡

Yes, even transitions in Vue are data-driven! The most basic example of a dynamic transition binds the name attribute to a dynamic property.

由于过渡效果的实现都是在<transition> or <transition-group> 组件上添加属性，那么这些属性的属性值根据不同条件也可以被指定不同的动态值。
这就是动态过渡的由来。让过渡更加灵活和随心所欲

更多Vue文档解读：《Vue Doc 笔记》