(一)Vue中CSS动画原理

本节知识点

  • (一)Vue中CSS动画原理

(一)原理

Vue里面的动画必须用transition最外层的标签包裹起来然后配合name属性
要是不写name属性默认就是v-
例如

  <transition name="fade">
      <div v-if="show">Hello World</div>
    </transition>

有的时候我希望自定义类名Vue中也提供了enter-active-class="自定义类名" leave-active-class="自定义类名",这样配合animate.css使用

<body>
  <div id="app">
    <transition enter-active-class="show" leave-active-class="hide">
      <div v-if="show">Hello World</div>
    </transition>

    <button @click="change">点击切换</button>
  </div>
</body>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!",
      show: true
    },
    methods: {
      change() {
        this.show = !this.show;
      }
    },
  })
</script>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  
  #app {
    font-size: 24px;
    color: #000;
  }
  /*动画开始到结束有*/
  
  @keyframes bounce-in {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(1.5);
    }
    100% {
      transform: scale(1);
    }
  }
  
  .show {
    transform-origin: left center;
    animation: bounce-in 1s;
  }
  /*动画开始到结束有*/
  
  .hide {
    transform-origin: left center;
    animation: bounce-in 1s reverse;
  }
</style>
原理: .v-enter ,v-enter-to,v-enter-active,v-leave,v-leave-to,v-leave-active Vue里面的动画效果必须要经历这3个步骤

(2)代码


<body>
  <div id="app">
    <transition name="fade">
      <div v-if="show">Hello World</div>
    </transition>

    <button @click="change">点击切换</button>
  </div>
</body>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      message: "Hello World!",
      show: true
    },
    methods: {
      change() {
        this.show = !this.show;
      }
    },
  })
</script>
<style>
  * {
    margin: 0px;
    padding: 0px;
  }
  
  #app {
    font-size: 24px;
    color: #000;
  }
  /*初始化开始,运动就没有了*/
  
  .fade-enter {
    opacity: 0;
  }
  /*运动开始了*/
  
  .fade-enter-to {}
  /*动画开始到结束有*/
  
  .fade-enter-active {
    transition: opacity 1s;
  }
  /*运动离开初始化,运动就没有了*/
  
  .fade-leave {
    opacity: 1;
  }
  /*运动开始了*/
  
  .fade-leave-to {
    opacity: 0;
  }
  /*动画开始到结束有*/
  
  .fade-leave-active {
    transition: opacity 1s;
  }
</style>

推荐阅读更多精彩内容