Vue基础篇之过渡和动画

fvcvv

已于 2022-12-07 17:12:03 修改

阅读量712

点赞数

文章标签： vue.js javascript ecmascript

于 2022-11-30 17:22:54 首次发布

本文链接：https://blog.csdn.net/fvcvv/article/details/128113156

版权

本文详细介绍了Vue中过渡和动画的使用，包括上下逐渐消失、左右消失出现的过渡效果，多元素过渡，列表过渡的实现，并探讨了单一元素的动画处理。还特别提到了在处理多元素过渡时避免卡顿的方法以及在列表过渡中如何确保元素唯一性。最后总结了过渡与动画的区别和使用注意事项。

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

1.Vue的过渡和动画

意义：Vue 内置了 transition组件用来实现动画和过渡
过渡（transform）和动画（animate）

transition不会被渲染成任何标签在transition加name给动画命名
使用transition组件提供的 name 来定义一些 class 控制的过渡效果
初始 | 过渡中 | 结束

1.1过渡

1.1.1、上下逐渐消失的过渡效果

出现的第一帧

.fade-enter{
   
  opacity: 0;
}

出现正在进行的状态

.fade-enter-active{
   
   transition: opacity 0.5s
}

出现结束就是元素默认出现的样子一般可以不用设置

.fade-enter-to{
   
   opacity: 1;
}

离开时候的第一帧就是元素默认出现的样子一般可以不用设置

.fade-leave{
   
   opacity: 1;
}

离开正在进行的状态

.fade-leave-active{
   
    transition: opacity 0.5s
}

离开结束

.fade-leave-to{
   
   opacity: 0;
}

创建点击事件

<template>
 <div>
  <h2>过渡和动画</h2>
  <!-- 创建点击事件-->
  <button @click="toggle">toggle</button>
  <transition name="fade">
    <p v-show="show">hello</p>
  </transition>
 </div>
</template>

<script>
export default {
     
  data(){
     
    return{
     
    // hello 的初始状态
      show: true
    }
  },
  methods: {
     
    toggle(){
     
    // 每一次点击 toggle 结果都会取反
      this.show = !this.show
    }
  }
}
</script>

1.1.2、左右消失出现的过渡效果

出现的第一帧

.move-enter{
   
  opacity: 0;
  transform: translateX(200px);
}

离开结束

.move-leave-to{
   
  opacity: 0;
  transform: translateX(-200px);
}

出现正在进行的状态与离开正在进行的状态

.move-enter-active, .move-leave-active{
   
  transition: all 1s;
}

创建点击事件

<template>
 <div>
  <h2>过渡和动画</h2>
  <button @click="show1 = !show1">切换</button>
  <transition name="move">
    <button style="margin-left: 400px" v-show="show1">on</button>
  </transition>
 </div>
</template>

<script>
export default {
     
  data(){
     
    return{
     
      show1