vue2 - 过渡与动画什么时候生效，设置动画，设置过渡，第三方动画库

1.过渡与动画什么时候生效

在插入，更新，移除DOM元素时，在合适的时候给元素添加样式类名

 

2.动画

1.定义 transition name appear

2.定义 xxx-enter-active，xxx-leave-active

<template>
  <div id="app">
    <button v-on:click="is=!is">开/关</button>
    <!--name 参数 多个动画时好区分，appear DOM加载完毕时会执行一次enter-->
    <transition name="animation1" appear>
      <h1 v-show="is">Hello,World</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      is: true,
      user: {
        username: "levi"
      }
    }
  }
}
</script>

<style scoped>
  /*元素显示时执行一次 然后样式立马消失 一般配合过渡或者是动画使用*/
  .animation1-enter-active {

  }
  /*元素关闭时执行一次 然后样式立马消失 一般配合过渡或者是动画使用*/
  .animation1-leave-active {

  }
</style>

 

2.过渡

<style scoped>
  /*元素显示时执行 1*/
  .animation1-enter {

  }
  
  /*元素显示时执行 2*/
  .animation1-enter-to {

  }
  
  /*元素隐藏时执行 1*/
  .animation1-leave {

  }
  /*元素隐藏时执行 2*/
  .animation1-leave-to {

  }
</style>

 

3.第三方动画库

https://animate.style/