vue_多个元素或组件的过渡动画 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s
    }
  </style>
</head>
<body>
  <div id="app">
    <h3>多个元素/组件动画</h3>
    <!-- 点击切换的时候动画并不会生效，是因为vue会自动复用dom，添加key属性表示唯一元素就行 -->
    <!-- transition标签mode属性，mode="out-in"表示动画先出场在进场， mode='in-out'相反 -->
    <transition mode="out-in">
      <h2 v-if="show" key="hello">hello world</h2>
      <h2 v-else key="bye">bye world</h2>
    </transition>
    <button @click="handleClick">切换</button>
    <h3>组件过渡动画</h3>
    <transition mode="in-out">
      <component :is="type"></component>
    </transition>
  </div>
</body>
<script type="text/javascript">
  Vue.component('child',{
    template: `<div>child</div>`
  })
  Vue.component('child-one',{
    template: `<div>child-one</div>`
  })
  let vm = new Vue({
    el: '#app',
    data: {
      show: true,
      type: 'child'
    },
    methods: {
      handleClick () {
        this.show = !this.show
        this.type = this.type=="child"? 'child-one': 'child'
      }
    }
  })
</script>
</html>

 

posted @ 2020-03-10 16:09  前端之旅  阅读(675)  评论(0)    收藏  举报