简介

1. transition 属性用于定义元素从一种样式变换到另一种样式时的过渡效果。它允许你指定过渡的持续时间、速度曲线、延迟时间等，使得样式变化更加平滑自然。
2. animation 属性则更为强大，它可以创建更复杂的动画效果，包括多个关键帧的变化。@keyframes 规则用于定义动画序列，而animation 属性用于将这些动画序列应用到元素上。

传统transition 和 animation

• 创建好Vue项目

  • 在容器中定义一个爱心emoji

  •          <div :class="['emoji',{pulse:!isActive}]">💖</div>
    

    • 解释： 这个div容器前面是固定类名'emoji'，后面是动态类名随着isActive布尔值变化而有无，当这个容器这两个类名都存在时候就会有pulse效果。

  • 创建一个animation.css文件，引入css文件

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    from {
        transform: scale3d(1,1,1);
        /* 变基属性 */
    }
    50%{
        transform: scale3d(1.5,1.5,1.5);
    }
    to {
        transform: scale3d(1,1,1);
    }
    /* 关键帧 */
}

animation-duration: 1s 表示动画持续时间 animation-iteration-count: infinite 表示执行的次数 infinite为无限次 一直执行

@keyframes为关键帧，就像PR，AE里面的关键帧一样，从开始到百分之50到最后的状态是怎么样的

scale3d中对应三个参数为x轴,y轴,z轴，设置1就是和给的大小一样，大于1就是拉伸，小于1就是缩小在各个方向上

特别注意：

transform在这有css 性能优化 GPU加速的作用， 当在CSS中对一个元素应用transform属性时，浏览器可能会自动创建一个新的合成图层（compositing layer），这是为了优化渲染性能。这种行为被称为“层化”（layering），它有助于提高页面的渲染效率，尤其是在进行复杂的动画或变换时。

以下是为什么添加transform会导致新图层产生的几个关键原因：

减少重绘和回流: 当元素需要进行变换时，如果没有独立的图层，浏览器可能需要重新计算整个页面的布局和绘制顺序。这可能导致页面的其他部分也需要重绘或回流，从而降低性能。通过创建一个新的图层，元素的变换只会影响该图层，而不会触发页面其他部分的重绘或回流。

利用GPU加速: transform属性通常涉及到复杂的数学运算，尤其是3D变换。GPU擅长处理这些类型的计算，因此浏览器会将这些任务卸载到GPU上执行。当元素被标记为需要进行变换时，浏览器会创建一个图层并将其发送给GPU，以便更高效地进行渲染。

提高动画性能: 对于动画来说，独立的图层意味着动画可以在GPU上进行，而不必等待主渲染线程完成其他任务。这可以显著提高动画的流畅性，特别是在高分辨率屏幕和高刷新率显示器上。

隔离渲染: 创建独立图层还可以帮助隔离渲染上下文，这意味着即使图层内的元素发生变化，也不会影响到页面的其他部分。这对于保持页面的响应性和避免不必要的重绘是非常有帮助的。

逻辑设计

在js代码中设计button 响应式变量isActive

<script setup>
import { ref } from 'vue';


const name = 'slh'
const isActive = ref(true)

const toggleEmoji = () =>{
  isActive.value = !isActive.value

}
</script>

注意点： ref和reactive区别 ref需要.value。 如果在template中ref变量不需要加.value。在vue3是因为有个Proxy的get拦截，在get拦截中会自动帮我们去取ref变量的.value属性。

然后你就可以得到一个跳动的心

在Vue中内置组件Transition

<Transition name="pulse">
      <div class='emoji '  v-if="isActive">💖</div>
      <!-- 一定要加v-if 或v-show  -->
</Transition> 

<Transition>组件本身并不预定义任何具体的过渡效果。"pulse"这样的效果是由CSS定义的。当给<Transition>组件的name属性赋值为"pulse"时，Vue会在内部生成一系列的CSS类名，例如pulse-enter-active, pulse-leave-active, pulse-enter-from , pulse-leave-to 等。这些类名会被动态地添加到目标元素上，以便应用过渡效果。

如果要有更细致的定制效果，一些内置的类似生命周期的钩子类名

在CSS Transition中利用类似生命周期的钩子类名，主要是为了控制元素在状态转换过程中的动画效果。具体来说：

• .before-enter & .enter: 这两个类名在元素即将进入（显示）时应用。.before-enter用于初始状态，而.enter则在动画开始后应用，可用于定义进入动画。

• .leave-to & .leave: 类似于进入状态，.leave在元素开始离开（隐藏）时应用，而.leave-to在动画结束后应用。这两个类名用于定义离开动画。

• .enter-active & .leave-active: 这些类名在整个过渡过程中有效，可用于定义过渡动画的持续时间、速度曲线等。

使用这些类名，可以精细地控制元素在状态转换时的动画细节，如淡入淡出、滑动、缩放等效果，从而提升用户体验和界面的视觉吸引力。

上述类名主要用于Vue.js框架中的<transition>组件，而在纯CSS中，我们通常直接使用transition属性结合:hover, :active等伪类来实现动画效果。

在X轴上滑动的效果

.slide-enter-from {
    opacity: 0;
    transform: translateX(30px);
}
.slide-enter-active {
    transition: .3s;
}
.slide-enter-to {
    opacity: 1;

}

.slide-leave-from {
    opacity: 1;
}
.slide-leave-active {
    transform: .3s;
}
.slide-leave-to {
    opacity: 0;
    transform: translateX(30px);
}

淡入淡出的效果

.v-enter-from {
    opacity: 0;
}
.v-enter-active{
    transition: 10s;
}
.v-enter-to{
    opacity: 1;
}
/* 离开时 */


.v-leave-from{
    opacity: 1;
} 
.v-leave-active{
    transition: 10s;
}
.v-leave-to{
    opacity: 0;
}

定义好的animate库直接调用

在项目中安装animate.css依赖npm i animate.css

在main.js里面导入全局样式

里面有非常的多的动画效果供我们玩弄

直接就能在Transition中用类就能实现好用的效果

<Transition
    class="animate__tada"
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounce"
>
    <div class='emoji '  v-if="isActive">💖</div>
</Transition>