连续敲了一个月的代码了，整个人都要麻了!毕竟天天都是盯着一堆死经文，论谁看都要眼花。我觉得必须要好好享受一下，所以前两天打了几把王者，喝了点小酒，再整了点娱乐节目，休整了两天。那么正题来了！怎样能够边敲代码边放松一下自己呢？让页面骚起来！也就是让页面活动活动，不要太呆板了，跟个死东西一样。

如何让页面骚起来？

我们平常的页面就是平平无奇的，点哪到哪，没有一点波澜，就跟这样，太平淡了太快了，秒男！

那么我们如何让我们的页面优雅点，让我们心情愉悦点呢？我们先来讨论一下，如何能够让页面动起来呢？首先我们知道这一点：其实vue中是有个transition组件给我们的页面添加动画效果的。

利用css和transition切换类名来让他动起来

我们可以通过设置类名，切换类名导致产生动画效果。

 <div :class="['emoji',{hidden: !isActive}]">🥳</div>  //设置个动态类名

.emoji {
 font-size: 80px;
 transition: 0.5s;
}

.hidden {
 opacity: 0;  
 transform: translateX(30px);
}

通过transition 和transform属性，我们可以得到到一个比较丝滑的动画效果，如图：

我觉得有必要介绍一下transition属性和transform属性：

transition 用于创建平滑的过渡效果，当元素的某个属性值发生改变时，在指定的时间内逐渐完成过渡。 我们可以设置transition的四个过渡相关的属性：

• transition-property: 定义应用过渡效果的CSS属性名称。如果想要所有属性都过渡，可以设置为 all。
• transition-duration: 定义过渡效果需要多少秒或毫秒才能完成。
• transition-timing-function: 规定过渡效果的时间曲线，比如 linear（线性）、ease（默认，逐渐变慢）、ease-in（加速）、ease-out（减速）等。
• transition-delay: 设置过渡效果何时开始，即在用户触发改变后延迟多久开始执行过渡。

例如：下面这行代码代表.example 类的所有可过渡属性在状态改变时，将在0.5秒内完成一个先加速后减速的过渡效果。

.example {
  transition: all 0.5s ease-in-out;
}

transform 属性允许你对元素进行旋转、缩放、移动或倾斜等二维或三维变换，而不会影响到文档流。常用的transform函数包括：

• rotate(): 旋转元素。
• scale(): 缩放元素。
• translate(): 移动元素的位置。
• skew(): 倾斜元素。

利用css中的animation属性，创建动态的效果。

animation 是 CSS 中的一个属性，用于创建动画效果。它允许我们将一系列样式更改应用于元素，从而在特定的时间周期内产生动态的视觉变换。animation 属性是一个简写属性，集合了多个与动画相关的子属性，使得定义动画变得更加简洁。

.pulse{
    animation-name:pulse;  /* 声明动画名字 */
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

/*将会触发GPU渲染加速 css性能优化 动画没有影响周围的文档流（图层）*/
@keyframes pulse{
    from{
        transform: scale3d(1,1,1);  
    }
    50%{
        transform: scale3d(1.5,1.5,1.5);
    }
    to{
        transform: scale3d(1,1,1);
    }
}

这是一个简单的使用示例，我们通过@keyframes 定义的关键帧动画名称，以及定义相应的动画规则。关键帧动画通过在不同时间点（百分比）定义元素的样式，来控制动画的过程。

scale()：缩放元素，参数可以是一个值（等比例缩放）或两个值（分别指定水平和垂直方向的缩放比例），例如 scale(2) 表示放大两倍，scale(2, 0.5) 表示水平方向放大两倍，垂直方向缩小一半。 我们在这里使用scale3d，他可以触发GPU渲染加速，进而优化css的性能。而且使用3d可以避免动画影响到周围的文档流。

• from（或0%）: 定义动画开始时的样式。这里将元素的缩放设置为原始大小（scale3d(1,1,1)），意味着没有任何缩放效果。
• 50%: 动画进行到一半时，元素的缩放比例变为1.5倍，即在X、Y、Z三个维度上都放大了1.5倍（scale3d(1.5,1.5,1.5)）。这会创造一个“脉冲”或“膨胀”的视觉效果。
• to（或100%）: 动画结束时，元素的缩放再次回到原始大小（scale3d(1,1,1)），准备开始下一轮循环。

而上面则是 .pulse 类样式，我们可以在里面可以定义animation的一些子属性，如：

1. animation-name: 定义@keyframes动画的名称，这个名称需要与@keyframes规则中的名称匹配。
2. animation-duration: 设置动画完成一个周期所需要的时间。
3. animation-timing-function: 规定动画的速度曲线，默认是ease，还有linear、ease-in、ease-out、ease-in-out等。
4. animation-delay: 动画开始前等待的时间。
5. animation-iteration-count: 动画的播放次数。可以是具体的数字，也可以是infinite表示无限循环。
6. animation-direction: 动画每次循环的方向，如normal、reverse、alternate、alternate-reverse。
7. animation-fill-mode: 动画在关键帧之外的状态，比如动画结束后元素的样式是否保留，可选值有none、forwards、backwards、both。
8. animation-play-state: 控制动画的播放状态，可以是running或paused。

我们可以看看这个效果，通过我们刚才设置animation属性，实现图像的等比例放缩的效果。

animation 相较于 transition 更加灵活和强大，可以创建多关键帧、更复杂的动画效果，并且能够更好地控制动画的播放次数、方向等参数。

利用vue中的transition组件，实现动态效果。

如果我们想要更细致的定制效果，我们可以使用vue的内置transition组件。它用于在元素或组件的进入/离开过程中实现过渡动画效果。<transition> 是一个封装好的抽象组件，它自身并不渲染任何DOM元素，而是为它的子元素提供进入/离开过渡。Vue通过监听子组件的生命周期钩子函数来自动应用过渡效果。

注意：transition触发需要有显示状态、列表内容的变动、组件类型的切换，以及通过特定事件监听属性变化时，例如v-if 或 v-show 所触发的切换，使用v-for进行列表项渲染等。

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

v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active 和 v-leave-to，用于定义进入和离开动画的不同阶段。我们可以清楚的知道各个时刻发生的一些动画，这个还是比较细致的。v-enter-from、v-enter-active这两个状态过渡基本上是一瞬间的。大家可以结合具体的检查来看看这个过程。

当然我们也可以通过给 组件传递 name 属性来声明一个过渡效果名，这样过渡类将以指定的名字作为前缀，这样就实现了我们定制的效果。

.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{
    transition:.3s;
}
.slide-leave-to{
    opacity: 0;
    transform: translateX(30px);
}

也可以使用 animation与transition相结合

我们可以通过 设置animation属性来达到我们想要的效果，这样就只需要定制enter-active和leave-active状态就可以了，如下：

.pulse-enter-active{
    animation: pulse 1s
}  

.pulse-leave-active{
    animation: pulse 1s
}  

注意，这里还是要定义我们组件的名字哦pulse 具体的效果就不在这里演示了。

使用第三方库Animate.css

Animate.css 是一个非常流行的CSS动画库，它提供了一套预设的、跨浏览器兼容的CSS动画效果，使得开发者能够轻松地给网页元素添加生动的动画效果，而无需从头编写复杂的动画代码。

我们要使用这个库首先就要安装它，我们可以使用npm install animation.css，然后再main.js中导入import 'animate.css'。这样我们就可以在我们的项目中使用animate.css库中的各种动画了。 animate__animated是Animate.css中必需的基础类，用于启动动画效果，我们在使用时，需要将animate__animated与任何动画名称一起添加到元素。我这里用的是一个摇晃的动画和一个弹跳的动画，具体的一些动画效果可以自己去看一下官方的演示animate.css动画演示_dowebok (5kzx.cn)

<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>

你看，这是不是就骚起来了。

总结

我们都是站在巨人的肩膀上，通过这次总结貌似感觉对这句话有了更好的理解。如果要我们自己完成最后的那个效果有些大佬也能完成但是工作量绝对很大，但是我们使用已经封装好的库再去实现的话那就不止轻松了一点点。最后，生活已经很辛苦了，要学会自己放松自己哟。看不了美女跳舞，还不能看表情跳舞了？