Vue3官网-过度&动画（九）transition&animation、ease-out,cubic-bezier、过渡class enter-from JavaScript 钩子过渡模式out-i

最新推荐文章于 2024-05-12 17:35:49 发布

ChrisP3616

最新推荐文章于 2024-05-12 17:35:49 发布

阅读量883

点赞数 2

分类专栏：前端工程师1——汇总前端工程师7——Vue3、Router、CLI、VueX 文章标签： javascript 动画 vue.js

本文链接：https://blog.csdn.net/qq_43456781/article/details/120418958

版权

Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡class（v-enter-from，v-enter-active）、JavaScript 钩子、过渡模式（out-in）文章目录Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡clas

摘要由CSDN通过智能技术生成

Vue3官网-过度&漫画（九）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡class（v-enter-from，v-enter-active）、JavaScript 钩子、过渡模式（out-in）

文章目录

Vue3官网-过度&漫画（九）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡class（v-enter-from，v-enter-active）、JavaScript 钩子、过渡模式（out-in）

总结：
补充
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

truthy（真值）：在 JavaScript 中，truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为假值（即除 false、0、""、null、undefined 和 NaN 以外皆为真值）。括号内都是假值falsy。

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

==Event.preventDefault方法取消浏览器对当前事件的默认行为。==比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；再比如，按一下空格键，页面向下滚动一段距离，使用这个方法以后也不会滚动了。该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

vue：用组件（app.component）构建一个模板（template），并反复使用模板
父组件、子组件
const app = Vue.createApp({
          
  components: {
          
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})
上面代码中app为父组件，ComponentA和ComponentB为子组件
Vue中美元$符号的意思

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

vue中$refs的作用？

当我们需要获取一个dom元素进行操作的时候可以利用原生js的getElementByXxx 而在vue中可以设置refs来获取这个dom元素

第三方网站

greensock API(GSAP)：是一套用于所有主流浏览器中制作高性能html5动画的工具。他们有一个很棒的 ease visualizer，帮助你建立精心制作的画架。

animate.css ：集成第三方 CSS 动画库

CSS Triggers ：来查看哪些属性会在动画时触发重绘。这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。
过渡 & 动画概述（transition & animation）

Vue 提供了多种应用转换效果的方法

自动为 CSS 过渡和动画应用 class；

集成第三方 CSS 动画库，例如 animate.css ；

在过渡钩子期间使用 JavaScript 直接操作 DOM；

集成第三方 JavaScript 动画库。

css-hsl（）函数

hsl() 函数使用色相、饱和度、亮度来定义颜色。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。

HSL 是一种将 RGB 色彩模型中的点在圆柱坐标系中的表示法。这两种表示法试图做到比基于笛卡尔坐标系的几何结构 RGB 更加直观。

hue - 色相 定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色

saturation - 饱和度 定义饱和度; 0% 为灰色， 100% 全色

lightness - 亮度 定义亮度 0% 为暗, 50% 为普通, 100% 为白

css triggers

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kb79T3Ph-1632302146812)(https://segmentfault.com/img/bVCLim/view)]

紫色代表如果layout，中文一般翻译成回流，浅绿色代表Paint，一般翻译成重绘，深墨绿色代表Composite，翻译成混合，重绘和回流任意发生一个就会引起混合。
Change from default：设置属性(从默认值修改，相当于一开始没设置css)，Subsequernt updates：修改属性(对现有的属性值进行修改)。你当前看的属性是align-content，在这种情况下，B/G/W/E四种内核因为内核不同对修改/设置align-content引起的重绘/回流的情况各不相同，所以这个网站是用来告诉开发者不同内核浏览器对css属性修改的重绘/回流情况，开发者知道了这些细节可以提高页面性能。

transition

值描述

transition-property 指定CSS属性的name，transition效果

transition-duration transition效果需要指定多少秒或毫秒才能完成

transition-timing-function 指定transition效果的转速曲线

transition-delay 定义transition效果开始的时候

动画：ease-in,ease-in-out,ease-out,cubic-bezier

linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)

ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。

ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。

ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。

ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

cubic-bezier

称为三次贝塞尔曲线，主要是生成速度曲线的函数，规定是cubic-bezier(<x1>,<y1>,<x2>,<y2>) .

从上图中我们可以看到，cubic-bezier有四个点：
两个默认的，即：P0(0,0)，P3(1,1)；
两个控制点，即：P1(x1,y1)，P2(x2,y2)
注：X轴的范围是0~1，超出cubic-bezier将失效，Y轴的取值没有规定，但是也不宜过大。
我们只要调整两个控制点P1和P2的坐标，最后形成的曲线就是动画曲线。

greensock API(GSAP)
进入过渡 & 离开过渡
过渡class

v-enter-active：定义进入过渡生效时的状态。==在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。==这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-leave-active：定义离开过渡生效时的状态。==在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。==这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-COtyJC38-1632302146814)(https://v3.cn.vuejs.org/images/transitions.svg)]

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 <transition>，则 v- 是这些class名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter-from会替换为 my-transition-enter-from。
CSS过渡
transition: all 0.3s ease-out;
使用过渡class即可
CSS动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter-from 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
animation: bounce-in 0.5s;
自定义类名

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用。

类别

enter-from-class

enter-active-class

enter-to-class

leave-from-class

leave-active-class

leave-to-class
显性的过渡持续时间
<transition> 组件上的 duration prop 定制一个显性的过渡持续时间 (以毫秒计)：
<transition :duration="1000">...</transition>
你也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
JavaScript 钩子
可以在 attribute 中声明 JavaScript 钩子
  <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @leave="leave"
    :css="false"
  >
 ---------------------------------------------methods: {
    beforeEnter(el) {
      gsap.set(el, {
        scaleX: 0.8,
        scaleY: 1.2
      })
    },
过渡模式
in-out: 新元素先进行过渡，完成之后当前元素过渡离开。

out-in: 当前元素先进行过渡，完成之后新元素过渡进入。（大多数时候想要的状态）
<transition name="fade" mode="out-in">
  
</transition>

hue - 色相	定义色相 (0 到 360) - 0 (或 360) 为红色, 120 为绿色, 240 为蓝色
saturation - 饱和度	定义饱和度; 0% 为灰色， 100% 全色
lightness - 亮度	定义亮度 0% 为暗, 50% 为普通, 100% 为白

值	描述
transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。(匀速)
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）（相对于匀速，中间快，两头慢）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）（相对于匀速，开始的时候慢，之后快）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）（相对于匀速，开始时快，结束时候间慢，）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）（相对于匀速，（开始和结束都慢）两头慢）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

1. 过渡 & 动画概述

Vue 提供了一些抽象概念，可以帮助处理过渡和动画，特别是在响应某些变化时。这些抽象的概念包括：

在 CSS 和 JS 中，使用内置的 <transition> 组件来钩住组件中进入和离开 DOM。
过渡模式，以便你在过渡期间编排顺序。
在处理多个元素位置更新时，使用 <transition-group> 组件，通过 FLIP 技术来提高性能。
使用 watchers 来处理应用中不同状态的过渡。

我们将在本指南接下来的三个部分中介绍所有这些以及更多内容。然而，除了提供这些有用的 API 之外，值得一提的是，我们前面介绍的 class 和 style 声明也可以应用于动画和过渡，用于更简单的用例。

在下一节中，我们将回顾一些 web 动画和过渡的基础知识，并提供一些资源链接以进行进一步的研究。如果你已经熟悉 web 动画，并且了解这些原理如何与 Vue 的某些指令配合使用，可以跳过这一节。对于希望在开始学习之前进一步了解网络动画基础知识的其他人，请继续阅读。

基于 class 的动画和过渡

尽管 <transition> 组件对于组件的进入和离开非常有用，但你也可以通过添加一个条件 class 来激活动画，而无需挂载组件。

<div id="demo">
  Push this button to do something you shouldn't be doing:<br />

  <div :class="{ shake: noActivated }">
    <button @click="noActivated = true">Click me</button>
    <span v-if="noActivated">Oh no!</span>
  </div>
</div>

.shake {
   
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
   
  10%,
  90% {
   
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
   
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
   
    transform: translate3d(-4px, 0, 0)

最低0.47元/天解锁文章

ChrisP3616

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue3官网-过度&动画（九）transition&animation、ease-out,cubic-bezier、过渡class enter-from JavaScript 钩子过渡模式out-i

Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡class（v-enter-from，v-enter-active）、JavaScript 钩子、过渡模式（out-in）文章目录Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡clas
复制链接

扫一扫