transition组件给你不一样的用户体验

拉布拉多拉的多
616 阅读5分钟

对于前端网页开发人员来说，用户的体验是判断该项目能否留住用户的一大关键，一些简单的动画特效对于提高用户的体验感有很大的帮助，所以，vue的作者尤雨溪也想到了这一点，特此给vue内置了transition组件用于提供更细节的页面动态效果。

简介

<Transition> 它是一个vue的内置组件，这也意味着它可以在任意别的组件中被使用，无需注册（即不需要import引入该组件）。它可以将进入和离开的动画应用到插槽的元素或组件上。进入或离开可以由以下的条件之一触发：

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 <component> 切换的动态组件
  • 改变特殊的 key 属性

为什么会由这些条件触发呢？

因为我们在做动画效果时，常常伴随着元素或组件的出现或消失，它们的属性值会改变，而我们的动画效果一般都是基于css的transition属性控制，当transition指定了哪个属性的值发生改变时，该动画效果就会生效。

插槽就是transition组件中间的部分。

image.png

下面是transition组件最基本用法的示例：

<transition>
    <div v-if="isActive" class="emoji">🧡</div>
</transition>
<button type="button" @click="isActive=!isActive;">请按这里</button>

image.png

注：<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

  • 在基于 CSS 的过渡效果中一共有六个作用于进入与离开过渡效果的 CSS class，下面是来自vue开发文档所给出的图示：Transition | Vue.js (vuejs.org)

image.png

  1. v-enter - 应用于元素的开始进入过渡效果之前。
  2. v-enter-active - 应用于整个进入过渡效果期间，可以设置过渡效果的持续时间、延迟和曲线函数。
  3. v-enter-to - 应用于元素的结束进入过渡效果之后。
  4. v-leave - 应用于元素的开始离开过渡效果之前。
  5. v-leave-active - 应用于整个离开过渡效果期间，可以设置过渡效果的持续时间、延迟和曲线函数。
  6. v-leave-to - 应用于元素的结束离开过渡效果之后。

为过渡效果命名的方式

<transition> 组件用于添加进入和离开的过渡效果。当你在 transition 标签上使用 name 属性时，它主要用于生成过渡所需的 CSS 类名。默认情况下，transition 组件会使用 "v-" 前缀加上几个默认的阶段名称（如-enter, -enter-active, -leave等）来生成这些类名。但当你提供了一个 name 属性，这个前缀会被替换为你提供的名字，比如说：v-enter-from 变为 slide-enter-from.

<div class="card__content">
        <transition name="slide">
          <div v-if="isActive" class="emoji">🧡</div>
        </transition>
</div>

// css
.slide-enter-from,.slide-leave-to{
    opacity: 0;
    transform: translateX(30px);
}
.slide-enter-active,.slide-leave-active{
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1)
}
.slide-enter-to,.slide-leave-from{
    opacity: 1;
}

CSS的animation实现

CSS 的 animation 属性是一个复合属性，它允许你将多个动画相关的独立属性组合在一起，以便更简洁地定义动画效果。通过使用 animation，你可以设定动画的名称、持续时间、延时、迭代次数、方向、填充模式和计时函数等。

一个基本的 animation 属性声明可能如下所示：

.pulse {

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

}
/* css性能优化 GPU加速  动画不要影响周围的文档流*/
@keyframes pulse {
    from {
        transform: scale3d(1,1,1);
    }
    50% {
        transform: scale3d(1.5,1.5,1.5);
    }
    to {
        transform: scale3d(1,1,1);
    }
}

在这个例子中：

  • animation-name：动画名称，对应于 @keyframes 规则。
  • animation-duration：动画的持续时间。
  • animation-iteration-count：动画的迭代次数，可以是具体的数值或 infinite无限次数。

在@keyframes动画规则中：

  1. @keyframes pulse { ... }: 这行定义了一个新的关键帧动画，动画名称为 pulse。
  2. from { ... }: 这个关键字代表动画的起始点（0%）。在这个点上，应用的 CSS 样式是 transform: scale3d(1,1,1);，这表示元素会缩放到其原始尺寸的 100%，在三维空间中没有缩放变化。
  3. 50% { ... }: 这行指定了动画在中间点（50%）的状态。在这个时间点，元素的变换是 transform: scale3d(1.5,1.5,1.5);，意味着元素会在三个维度上放大到原始尺寸的 150%，从而产生放大效果。
  4. to { ... }: 这个关键字代表动画的结束点（100%）。与 from 关键字类似，它将元素的变换恢复到 scale3d(1,1,1)，也就是原始尺寸，因此动画会回到初始状态，完成一次脉冲效果。

自定义过渡 class

这里我们需要使用科技了，我们需要在页面中引入Animate.css，它是一个用于创建响应式和跨浏览器动画的 CSS3 动画库。它提供了一组预定义的动画类，可以轻松地添加到任何 HTML 元素上，而无需编写自定义的关键帧动画。这些动画都是用 CSS3 的 @keyframes 规则编写的，所以它们在现代浏览器中运行效率高且性能好。

可以在你的项目文件内用CDN引入到index.html：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

也可以使用npm包管理器下载:

npm install animate.css --save

接着，在你的主入口文件（通常是 main.js 或 index.js）中引入 Animate.css：

import 'animate.css';

然后我们只要向transition组件传入如下参数：

image.png 你传入的这些 class 会覆盖相应阶段的默认 class 名。

  • enter-active-class：当元素被插入到 DOM 中时（即进入），这个类会被添加到 <div> 上。animate__animated 是 Animate.css 的基础类，animate__rotateIn 是旋转进入的动画。
  • leave-active-class：当元素从 DOM 中移除时（即离开），这个类会被添加到 <div> 上。animate__rotateInDownLeft 是一个旋转并向下左方移动的动画。

这里给大家这个动画特效的网址Animate.css 一款强大的预设css3动画库 (jq22.com)

我们只需要在代码内这样修改类名，就可以使用animate.css内的样式特效，它们也都是用css的@keyframes动画做成的，我们导入这个样式文件就是方便我们更好的引用动画特效的。

image.png

下面演示一下效果吧！

屏幕录制-2024-07-17-211210_2.gif

下面贴一下全部的代码的运行程序，感兴趣的jy可以自行玩耍哦！

今天的分享就到这里，喜欢的 jym可以点赞加收藏哦！感谢您的浏览。

avatar
文章
阅读
粉丝