Vue中实现动画效果的多种方法小结

平时我们能在网页上看到很多动画效果，这些效果看起来就很引人注目。所以呢，我们是不是也可以在自己的项目中添加一些动画效果，让我们的页面看起来更加的高端大气上档次，博人眼球。所以就特意的去学习了一下关于Vue的一些动画效果，下面是我对实现动画效果的一些总结，希望可以帮助大家，如果有什么不对的地方，还望大佬们批评指正一下，感谢。

前戏准备

• 先创建一个Vue项目，并将一些html和css样式先写好
• 设计一个小卡片，点击按钮就可以出现一个emoji
• 然后通过添加动画效果，来修饰emoji的展现和消失。

大致代码如下：

• template部分：

<div class="page">
    <div class="card">
    
      <div class="card__header">
        <h3 class="card-title">{{ name }}</h3>
        <div class="card-subtitle">Transition & Animation</div>
      </div>
      
      <div class="card__content">
        <div :class="['emoji',{hidden:!isActive}]">⭐</div>
      </div>
      
      <div class="card__action">
        <button type="button" @click="isActive =!isActive">请按这里</button>
      </div>

    </div>
  </div>

• script setup部分：

import {ref} from 'vue'

const name ='Vue动画'
const isActive =ref(true)

• style lang="css" scoped部分：为了更好的演示，我将不需要更改的css样式打包起来，避免代码太乱了，不好修改。

@import './styles/app.css';
@import './styles/card.css';

• card.css样式组件：

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    box-sizing: border-box;
    padding: 32px;
    margin: 0 auto;
    background: #f8f8f8;
    border-radius: 10px;
  }

  .card__header {
    text-align: center;
    margin-bottom: 32px;
  }

  .card-title {
    margin-bottom: 8px;
  }

  .card-subtitle {
    font-size: 12px;
    color: #989898;
  }

  .card__content {
    min-height: 250px;
  }

  .card__action > button {  
    outline: none;
    border: none;
    background: none;
    border: 2px solid #d3c7c7;
    padding: 10px 24px;
    cursor: pointer;
    margin: 4px;
  }

  .card__action > button:active {
    opacity: 0.8;
  }

• app.css样式组件

input[type='text'],
textarea,
select {
  padding: 4px 8px;
  margin: 8px 0;
  margin-right: 8px;
  font-size: 16px;
}

label {
  margin-left: 4px;
}
.page {
  padding: 32px;
  margin: 32px;
}

.emoji {
  font-size: 80px;
}

.hidden {
  opacity: 0;
}

这个时候的效果图是这样的：

css中的transition和transform

在 CSS 中，transition 和 transform 是两个非常有用的属性，它们可以为网页元素的样式变化添加动画效果。那他们该怎么用呢？

transition

transition 用于创建平滑的过渡效果，当元素的某个属性值发生改变时，在指定的时间内逐渐完成过渡。

语法：transition: property duration timing-function delay;

• property：指定要过渡的 CSS 属性，例如 width、height、background-color 等。可以指定多个属性，用逗号分隔，也可以不指定。

• duration：过渡的持续时间，以秒（s）或毫秒（ms）为单位。

• timing-function：指定过渡的速度曲线，常见的值有 linear（匀速）、ease（默认，缓入缓出）、ease-in（缓入）、ease-out（缓出）、ease-in-out（缓入缓出）等 ，一般不设置的话都是默认值ease。

• delay：指定过渡效果的延迟时间，以秒（s）或毫秒（ms）为单位。

transform

transform 用于对元素进行变换操作，例如旋转、缩放、移动、倾斜等。

常见的变换函数有：

• rotate()：旋转元素，参数为角度值，例如 rotate(45deg) 表示顺时针旋转 45 度。

• scale()：缩放元素，参数可以是一个值（等比例缩放）或两个值（分别指定水平和垂直方向的缩放比例），例如 scale(2) 表示放大两倍，scale(2, 0.5) 表示水平方向放大两倍，垂直方向缩小一半。

• translate()：移动元素，参数可以是一个值（水平移动）或两个值（分别指定水平和垂直方向的移动距离），例如 translate(50px) 表示水平向右移动 50 像素，translate(50px, 100px) 表示水平向右移动 50 像素，垂直向下移动 100 像素，不过一般只设定某个方向的时候我们会用到translateX()和translateY()。

• skew()：倾斜元素，参数可以是一个值（水平倾斜）或两个值（分别指定水平和垂直方向的倾斜角度），例如 skew(30deg) 表示水平倾斜 30 度，skew(30deg, 15deg) 表示水平倾斜 30 度，垂直倾斜 15 度。

不过在实际应用中，transition 和 transform 常常结合使用，以实现更加丰富和复杂的动画效果。所以我们在app.css样式组件中的.emoji和.hidden添加一点属性就好，其他不用修改。

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

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

来看看效果图：

css中的animation

animation 是 CSS 中用于创建更复杂和自定义动画的强大属性。

语法：

animation: name duration timing-function delay iteration-count direction fill-mode;

• name：指定动画的名称，通过 @keyframes 规则来定义。

• duration：动画的持续时间，以秒（s）或毫秒（ms）为单位。

• timing-function：动画的速度曲线，与 transition 中的类似，如 linear、ease 等。

• delay：动画开始前的延迟时间。

• iteration-count：动画的播放次数，可以是具体数字、infinite（无限次）。

• direction：动画的播放方向，可选值有 normal（默认，正向播放）、reverse（反向播放）、alternate（交替播放，先正向后反向）、alternate-reverse（交替播放，先反向后正向）。

• fill-mode：规定动画在执行前后的样式，可选值有 none（默认，动画结束后回到初始状态）、forwards（动画结束后保持最后一帧的样式）、backwards（在动画延迟期间应用动画的第一帧样式）、both（向前和向后填充模式都应用）。

@keyframes 规则

通过 @keyframes 来定义动画的关键帧。

@keyframes pulse {
    from{
        transform:scale3d(1,1,1); 
    }
    50%{
        transform:scale3d(1.5,1.5,1.5);
    }
    to{
        transform:scale3d(1,1,1)
    }
}

定义了pulse动画的不同状态。通过设定transform属性中的scale3d()函数，元素在动画过程中会在三维空间内缩放。具体来说，from关键字表示动画开始时元素的状态，这里是原始大小（1,1,1）；50%表示动画中间的状态，元素被放大到1.5倍（1.5,1.5,1.5）；to关键字表示动画结束时元素的状态，它会回到原始大小（1,1,1），确保动画循环时的连贯性。

animation 相较于 transition 更加灵活和强大，可以创建多关键帧、更复杂的动画效果，并且能够更好地控制动画的播放次数、方向等参数。但同时，在使用时也需要注意性能优化，避免过度使用复杂的动画影响页面的加载和渲染速度。

OK，那我们再创建一个animation.css样式组件：

.pulse{
    animation-name:pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
/* css 性能优化  scale3d() GPU加速  动画不要影响周围的文档流（图层）*/
@keyframes pulse {
    from{
        transform:scale3d(1,1,1); 
    }
    50%{
        transform:scale3d(1.5,1.5,1.5);
    }
    to{
        transform:scale3d(1,1,1)
    }
}

记得在vue中style lang="css" scoped部分引入：

<style lang="css" scoped>
@import './styles/app.css';
@import './styles/card.css';
@import './styles/animation.css';
</style>

并且在template部分修改代码

来看看效果图：

vue中的transition内置组件

在 Vue 中，transition 是一个内置组件，用于在元素或组件进入和离开 DOM 时应用动画效果。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。

transition 组件的一些特点和用法如下：

• 触发条件：可以由 v-if 或 v-show 所触发的切换、动态组件的切换、组件根节点的切换或特殊元素 切换的动态组件触发。

• CSS 过渡类：transition 组件会自动检测目标元素是否应用了 CSS 过渡或动画，并在适当的时机 添加和移除 相应的 CSS 过渡类。这些过渡类包括 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active 和 v-leave-to，用于定义进入和离开动画的不同阶段。

  • 修改template部分：

• 添加css样式：

• 效果图：

• 过渡效果命名：可以通过给 组件传递 name 属性来声明一个过渡效果名，这样过渡类将以指定的名字作为前缀。
  • 修改template部分：

• 添加css样式：

• 效果图：

结合 CSS 过渡或动画：一般会搭配原生 CSS 过渡或动画一起使用，通过设置 transition或者animation CSS 属性来定义动画的属性、持续时间和速度曲线等。

• 修改template部分：

• 添加css样式（注意这里还调用了animation.css样式组件中的css）：

• 效果图：

当然，还有其他的用法，例如：

• 自定义过渡类：可以向 组件传递 enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class 和 leave-to-class 等属性来指定自定义的过渡类，这些类的优先级高于普通类名。

• JavaScript 钩子函数：提供了一些 JavaScript 钩子函数，如 beforeEnter、enter、afterEnter、enterCancelled、beforeLeave、leave、afterLeave 和 leaveCancelled 等，可以在这些钩子函数中执行自定义的 JavaScript 逻辑。

通过合理使用 transition 组件和相关的过渡类、钩子函数，可以实现各种丰富的动画效果，提升用户体验。同时，可以结合 CSS 过渡和动画来进一步增强动画的表现力。

第三方库Animate.css

在 Vue 项目中使用 animation.css 库，您可以按照以下步骤进行操作：

• 安装 animation.css 库：您可以使用 npm 或 yarn 来安装。

  • 使用 npm ：npm install animation.css

  • 使用 yarn ：yarn add animation.css

• 在 Vue 组件中引入 animation.css 样式文件。在main.js中引入

• 然后组件的模板中，为需要添加动画的元素添加相应的类名。animation.css 提供了很多预定义的动画类名，我们可以根据需要选择。 我们可以在Animate.css文档中进行挑选，并查看如何使用。

• 引入 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）：

  • 修改template部分：

• 效果图：

结语

制作动画的效果有很多，在我们的项目中加入这些动画效果，更能博人眼球引人注目，显得更加的高端优雅。希望这些可以帮助到你，结合你天马行空的想法，去制作多种动画效果。

以上就是Vue中实现动画效果的多种方法小结的详细内容，更多关于Vue实现动画效果的资料请关注脚本之家其它相关文章！

最新评论