提升用户体验：在Vue.js项目中实现CSS过渡和动画

过渡和动画在网页设计中用来增强用户体验，使界面看起来更加生动和自然。它们通过视觉效果来引导用户注意，提高交互性，增加网站的吸引力。

1.绑定类名

我们可以通过绑定类名来修改样式达到动画的效果：

<div class="card_content">
    <div :class="['emoji',{'hidden':!isActive}]">🫰</div>
</div>
<div class="card_action">
    <button type="button" @click="isActive = !isActive">请按这里</button>
</div>

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

.hidden {
  opacity: 0;
}

效果为这样：

这里我们实现这个效果主要是 应用于transition: 0.5s使 .emoji 元素的样式改变都将有一个0.5秒的过渡效果。然后通过按钮再给它绑定hidden类名使他不透明度为0隐藏起来。这看起来可能有点生硬不丝滑，那么我们在hidden里添加一个transform: translateX(30px)，使它隐藏时并且向右移动30px。

再看看效果：

是不是感觉就有点德芙般的丝滑！

基于css的过渡效果

拿一张官方文档的图来解释一个动画从开始到结束的状态

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
4. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

我来尝试一下

<div class="card_content">
    <transition >
          <div v-show="isActive" class="emoji">🫰</div>
    </transition>
</div>
<div class="card_action">
    <button type="button" @click="isActive = !isActive">请按这里</button>
</div>

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

小建议我们使用vue写项目可以将css模块化引入到我们需要的组件中

当我们将代码改成这样可以看看效果：

也有一个渐进渐出的效果这里可能进入动画的生效状态时间设置的有点短可能效果没那么明显。这里我们也可以向上面一样在进入动画的和离开动画的起始和结束状态添加一个transform: translateX()方法就也能展现出那般丝滑。

这里如果当我们需要动态的结构多了且所需动画不一样我们就应该给<transition name="slide">像这样添加一个标签，然后样式我们就把每种状态前的v修改成相应的名字就行。

animation

animation给我们提供了另外一种动态效果：

我们先写好一个应用名为pulse的动画。

.pulse{
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/* css 性能优化   3d加速gpu渲染  动画不要影响周围的文档流*/
@keyframes pulse{
    from{
        transform: scale3d(1,1,1);
    }
    50%{
        transform: scale3d(2, 2, 2);
    }
    to{
        transform: scale3d(1, 1, 1);
    }
}

• animation-name: pulse; 指定要应用的关键帧动画名称。
• animation-duration: 1s; 设置动画的总时长为 1 秒。
• animation-iteration-count: infinite; 指定动画应该无限次重复播放。

然后来到我们的App.css

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

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

• .pulse-enter-active:

  • 这个类应用于元素正在进入视图时。在 Vue.js 的过渡系统中，这个类会在元素插入到 DOM 中并开始过渡/动画时应用。

  • animation: pulse 1s; 表示将应用名为 pulse 的动画，该动画将持续 1 秒。

• .pulse-leave-active:

  • 这个类应用于元素即将离开视图时。同样，在 Vue.js 的过渡系统中，这个类会在元素从 DOM 中移除之前开始过渡/动画时应用。
  • 同样地，animation: pulse 1s; 将同样的 pulse 动画应用于离开的元素，持续时间为 1 秒。

这样我们的duangduang的效果就出来了。

animate.css

Animate.css 是一个别人给我写好的 CSS3 动画库。感兴趣可以去看看官方文档学习一下。

先来安装一下这个库，通过下面指令

npm install animate.css

然后就来到main.js引入这个组件库

最后在<transition>组件中，添加leave-active-class的值与enter-active-class保持一致以确保动画效果。

<transition class="animate__tada"
enter-active-class="animate__animated animate__infinite"
leave-active-class="animate__animated animate__bounce">
    <div v-if="isActive" class="emoji">🫰</div>
</transition>

效果就出来了：

官方文档里还有很多效果的动画可以去官方文档学习使用

总结

过渡和动画在网页设计中起到重要作用，能够显著提升用户体验。通过视觉效果引导用户注意、提高交互性、增加网站吸引力。 新手总结欢迎大佬指正！！！