本文详细介绍了Vue3中的过渡和动画，包括列表过渡（<transition-group>使用、FLIP技术、动态过渡等）、状态过渡（借助gsap实现），展示了如何创建可复用的过渡组件，以及如何将过渡逻辑置于子组件中，为设计赋予生命。
Vue3官网-过渡&动画（十）gsap、列表过渡（<transition-group>、tag、FLIP技术、v-move、动态过度、可复用过渡）、状态过渡（第三方库gsap、把过渡放在子组件）
文章目录
总结：
补充
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，帮助你建立精心制作的画架。
- GSAP的全名是==GreenSock Animation Platform，这个名字是有些怪异（官网还在各种安利你加入它的Club），但它的确是一个从flash时代一直发展到今天的专业动画库。==参照优快云：https://blog.youkuaiyun.com/weixin_39939012/article/details/80833073
- animate.css ：集成第三方 CSS 动画库
- CSS Triggers ：来查看哪些属性会在动画时触发重绘。这个网站是用来告诉开发者不同内核浏览器对css属性修改的
重绘/回流情况，开发者知道了这些细节可以提高页面性能。JavaScript钩子
- 添加
:css="false"，也会让 Vue 会跳过 CSS 的检测，除了性能略高之外，这可以避免过渡过程中 CSS 规则的影响。列表过渡
概述
- 默认情况下，它不会渲染一个包裹元素，但是你可以通过
tagattribute 指定渲染一个元素。（例如<p>指段落，<ul>指网络链接）- 过渡模式（out-in,in-out）不可用，因为我们不再相互切换特有的元素。
- 内部元素总是需要提供唯一的
keyattribute 值。- CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
列表的进入/离开过渡
补充
splice()方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。
arr.splice(start, count, addElement1, addElement2, ...);splice的第一个参数是删除的起始位置（从0开始），第二个参数是被删除的元素个数。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
列表：使用v-for
列表过渡：使用
<transition-group>组件列表的移动过渡
FLIP技术
v-move类
它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过
nameattribute 来自定义前缀，也可以通过move-classattribute 手动设置。.flip-list-move { transition: transform 0.8s ease; }列表的交错过渡
- 通过 data attribute 与 JavaScript 通信，就可以实现列表的交错过渡：
- 数据属性指：el.dataset.index之类
可复用的过渡
- 将
<transition>或者<transition-group>作为根组件，然后将任何子组件放置在其中就可以了。- 使用 template
动态过度
首先，在 Vue 中即使是过渡也是数据驱动的！动态过渡最基础的例子是通过
nameattribute 来绑定动态的值。<transition :name="transitionName"> <!-- ... --> </transition>其次，尽管所有过渡 attribute 都可以动态绑定，我们可用的不仅有 attribute。因为事件钩子是方法，它们可以访问任何上下文中的数据，这意味着根据组件的状态不同，你的 JavaScript 过渡可以有不同的表现。
最后创建动态过渡的最终方案是组件通过接受 prop 来动态修改之前的过渡。
状态过渡
- 数据元素本身动效
- 数据元素
- 数字和运算
- 颜色的显示
- SVG 节点的位置
- 元素的大小和其他的 property
- 这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应性和组件系统，使用第三方库（gsap）来实现切换元素的过渡状态。
把过渡放在组件里
管理太多的状态过渡会迅速增加组件实例的复杂度，幸好很多的动画可以提取到专用的子组件中。
如下面所示，所有的数值过渡都自动存放在’animated-integer’组件中
app.component('animated-integer', {
1. 列表过渡
目前为止，关于过渡我们已经讲到：
- 单个节点
- 多个节点，每次只渲染一个
那么怎么同时渲染整个列表，比如使用 v-for？在这种场景下，我们会使用 <transition-group> 组件。在我们深入例子之前，先了解关于这个组件的几个特点：
- 默认情况下，它不会渲染一个包裹元素，但是你可以通过
tagattribute 指定渲染一个元素。 - 过渡模式不可用，因为我们不再相互切换特有的元素。
- 内部元素总是需要提供唯一的
keyattribute 值。 - CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。
列表的进入/离开过渡
现在让我们由一个简单的例子深入，进入和离开的过渡使用之前一样的 CSS 类名。
<div id="list-demo">
<button @click="add">Add</button>
<button @click="remove">Remove</button>
<transition-group name="list" tag="p">
<span v-for="item in items" :key="item" class="list-item">
{
{ item }}
</span>
</transition-group>
</div>
const Demo = {
data() {
return {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
}
},
methods: {
randomIndex() {
return Math.floor(Math.random() * this.items.length)
},
add() {
this.items.splice(this.randomIndex(), 0, this.nextNum++)
},
remove() {
this.items.splice(this.randomIndex(), 1)
}
}
}
Vue.createApp(Demo).mount('#list-demo')
.list-item {
display: inline-block;
margin-right: 10px;
}
最低0.47元/天 解锁文章
扫一扫
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
