Vue 中的动画特效(二)

版权声明：转载请注明出处 https://blog.csdn.net/SOALIN228/article/details/84949380

Vue中多个元素或组件的过渡

• 元素过渡：元素设置时注意要加上 key 来告诉 Vue 不要复用 DOM ，否则不会出现动画，我们为 transition 设置 mode 即可实现过渡效果

---

.v-enter,
.v-leave-to {
   opacity: 0;
 }
 .v-enter-active,
 .v-leave-active {
   transition: opacity 1s;
 }

<transition mode="out-in"> //可以不设置mode mode="in-out"
  <div v-if="show" key="hello">hello world</div>
  <div v-else key="bye">Bye world</div>
</transition>

---

• 组件过渡：通过给 component 设置 is，再通过点击切换，就可实现组件间的过渡效果

<transition mode="out-in">
  <component :is="type"></component>
</transition>

Vue.component('child', {
  template: '<div>child</div>'
})

Vue.component('child-one', {
  template: '<div>child-one</div>'
})

---

Vue中列表过渡

transition-group 相当于给每个 div 外层都添加了一个 transition，这样列表的每一项就都会有过渡效果了

---

 <transition-group>
  <div v-for="item of list" :key="item.id">
    {{item.title}}
  </div>
</transition-group>

---

Vue中的动画封装

<fade :show="show">
  <div>hello world</div>
</fade>  

<fade :show="show">
  <h1>hello world</h1>
</fade>

Vue.component('fade', {
 props: ['show'],
  template:`
    <transition 
      @before-enter="handleBeforEnter"
      @enter="handleEnter">
      <slot v-if="show"></slot>
    </transition>
    `,
  methods: {
    handleBeforEnter: function(el) {
      el.style.color = 'red';
    },
    handleEnter: function(el, done) {
      setTimeout(() => {
        el.style.color = 'green';
        done();
      }, 2000);
    }
  }  
})