Vue过度与动画

最新推荐文章于 2025-11-21 15:30:50 发布

原创最新推荐文章于 2025-11-21 15:30:50 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

linerVue 专栏收录该内容

56 篇文章

订阅专栏

本文展示了如何在Vue.js中使用transition和transition-group组件来实现元素的进入、离开和出现动画效果。通过定义CSS关键帧动画和绑定不同的active类，可以自定义过渡效果。此外，还介绍了如何结合animate.css库快速应用预定义的动画。

Test.vue:元素外面包一层transition，展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果，appear上来默认展示动画效果

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
<!--元素外面包一层transition，展示的时候就默认调用style里面的v-enter-action和v-leave-action执行进入和退出效果，appear上来默认展示动画效果-->
    <transition appear>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "MyTest",
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
  h1{
    background-color: orange;
  }
  .v-enter-active{
    animation: liner 0.5s linear;
  }
  .v-leave-active{
    animation: liner 0.5s linear reverse;
  }
  /*这里定义的liner名称随便，供上面animation用*/
  @keyframes liner {
    from{
      transform: translateX(-100%);
    }
    go{
      transform: translateX(0px);
    }
  }
</style>

Test2.vue : 多条数据需要用transition-group展示，name属性与style里面的要一样，多条数据需要设置key值

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
<!--多条数据需要用transition-group展示，name属性与style里面的要一样，多条数据需要设置key值-->
    <transition-group name="hello" appear>
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">liner！</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "MyTest",
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
  h1{
    background-color: orange;
  }
  /*进入的起点，离开的终点*/
  .hello-enter,.hello-leave-to{
    transform: translateX(-100%);
  }
  /*进入的终点，离开的起点*/
  .hello-enter-to,.hello-leave{
    transform: translateX(0);
  }
  /*进入，离开的动作过程触发效果*/
  .hello-enter-active,.hello-leave-active{
    transition: 0.5s linear;
  }
</style>

Test3.vue : 安装第三方样式库animate.css

npm install animate.css

先导入import 'animate.css'，多条数据transition-group，name用的animate.css库中的name，进出离开效果自动触发，enter-active-class和leave-avtive-class绑定的效果

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
<!--多条数据transition-group，name用的animate.css库中的name，进出离开效果自动触发，enter-active-class和leave-avtive-class绑定的效果-->
    <transition-group
        name="animate__animated animate__bounce"
        appear
        enter-active-class="animate__swing"
        leave-active-class="animate__bounceOutUp"
    >
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">liner！</h1>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css'
export default {
  name: "MyTest",
  data(){
    return{
      isShow:true
    }
  }
}
</script>

<style scoped>
  h1{
    background-color: orange;
  }


</style>