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/animate.css@3.5.1" 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">...