[091-095]_Vue的过渡与动画

本文链接：https://blog.csdn.net/gty204625782/article/details/121606928

本文详细介绍了Vue的过渡与动画机制，包括在main.js和App.vue中的配置，以及在不同组件如Test.vue, Test2.vue, Test3.vue, MyHeader.vue, MyList.vue, MyItem.vue, MyFooter.vue中如何实现动画效果。文章总结了Vue封装的过渡动画原理，重点讨论了如何在DOM元素插入、更新或移除时添加样式类名，如v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active和v-leave-to，并提供了TodoList案例的新增动画代码示例。" 52750091,5717547,Swift初探：小费计算器开发心得,"['ios开发', 'swift编程', 'UI设计', '应用调试', '软件开发']

摘要由CSDN通过智能技术生成

过渡与动画（完整代码）

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false

//创建vm
new Vue({
   
  el: '#app',
  render: h => h(App),
  beforeCreate() {
   
    Vue.prototype.$bus = this
  }
})

App.vue

<template>
  <div>
    <Test />
    <Test2 />
    <Test3 />
  </div>
</template>

<script>
  import Test from './components/Test'
  import Test2 from './components/Test2'
  import Test3 from './components/Test3'

  export default {
     
    name: 'App',
    components: {
     
      Test,
      Test2,
      Test3
    },
  }
</script>

组件

Test.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello" appear>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

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

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

  .hello-enter-active {
     
    animation: atguigu 0.5s linear;
  }

  .hello-leave-active {
     
    animation: atguigu 0.5s linear reverse;
  }

  @keyframes atguigu {
     
    from {
     
      transform: translateX(-100%);
    }

    to {
     
      transform: translateX(0px);
    }
  }
</style>

Test2.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="!isShow" key="1">你好啊！</h1>
      <h1 v-show="isShow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

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

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

  /* 进入的起点、离开的终点 */
  .hello-enter,
  .hello-leave-to {
     
    transform: translateX(-100%);
  }

  .hello-enter-active,
  .hello-leave-active {
     
    transition: 0.5s linear;
  }

  /* 进入的终点、离开的起点 */
  .hello-enter-to,
  .hello-leave {
     
    transform: translateX(0);
  }
</style>

Test3.vue

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group appear name="animate__animated animate__bounce" enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp">
      <h1 v-show="