变形工具 | Quasar 框架

变形工具

您可以使用下面描述的 Quasar 变形工具，将一个 DOM 元素变形为另一个 DOM 元素（带动画），或在同一元素的两个状态之间进行变形。

可能也值得看看变形指令，它使用了此工具，但使用起来更简单。

基本用法

import { morph } from 'quasar'

// Morph one DOM element to another:
const cancelMorph = morph({
  from: '#from-el',
  to: '#to-el'
})

// call cancelMorph() to cancel the morphing

该函数期望一个包含以下键的必需对象参数

名称	类型	默认值	描述
from	DOM	-	（必需）一个 DOM 元素或 CSS 选择器，或一个返回 DOM 元素的函数
to	DOM	-	与“from”相同；如果缺少“to”，则假定它与“from”相同
onToggle()	函数	-	一个同步切换函数，将在保存初始元素状态后立即执行。使用一个切换组件状态的函数，以便目标元素可用。
waitFor	数字/‘transitioned’/Promise	0	一个数字、'transitionend' 或 Promise - 它将延迟动画开始指定毫秒数，或直到目标元素发出 'transitionend' 事件，或直到 Promise 解析（如果 Promise 被拒绝，则变形将中止，但 `toggle 函数` 已经被调用）。
duration	数字	300	动画的持续时间（毫秒）。
easing	字符串	‘ease-in-out’	动画的时序函数（CSS 缓动格式）。
delay	数字	0	动画的延迟时间（毫秒）。
fill	字符串	‘none’	动画的填充模式。
样式	字符串/对象	-	在动画过程中应用于变形元素的额外样式（字符串或 CSSStyleDeclaration 对象）。
classes	字符串	-	在动画过程中应用于变形元素的额外类（字符串）。
resize	布尔值	false	强制调整大小而不是默认的缩放变换。
useCSS	布尔值	false	强制使用 CSS 而不是 Animation API。
hideFromClone	布尔值	false	默认情况下，初始元素的克隆用于在元素移除后填充空间 - 如果初始元素没有移除或不需要调整初始元素占据的空间大小，则设置此标志。
keepToClone	布尔值	false	默认情况下，最终元素从其最终位置移除以进行动画 - 设置此标志以在最终位置保留一个副本。
tween	布尔值	false	默认情况下，最终元素从初始元素的位置和纵横比变形到最终元素的位置和纵横比 - 设置此标志以在初始元素和最终元素之间使用不透明度过渡。
tweenFromOpacity	数字	0.6	如果使用 tween，则为初始元素的初始不透明度（将动画到 0） - 初始元素放置在目标元素的顶部。
tweenToOpacity	数字	0.5	如果使用 tween，则为目标元素的初始不透明度（将动画到 1）。
onEnd(direction, aborted)	函数	-	变形完成时将调用的函数 - 接收两个参数：“direction” 是一个字符串（如果变形在最终状态完成则为 'to'，如果在初始状态完成则为 'from'），“aborted” 是一个布尔值（true 表示动画已中止）。

变形生命周期

获取初始元素的纵横比和位置（如果提供了获取初始元素的函数，则将调用该函数）。
计算初始元素容器的大小和位置。
如果另一个变形正在使用相同的元素，则该变形将被中止。
执行 onToggle() 函数（如果存在）。
重新计算初始元素容器的大小和位置以检查它们是否已更改。
在下一个 tick（允许 Vue 处理状态更改）中，将识别最终元素（如果提供了获取最终元素的函数，则将调用该函数）。
如果另一个变形正在使用相同的元素，则该变形将被中止。
计算最终元素容器的大小和位置。
如果提供了 **waitFor**，则等待指定毫秒数，或等待 'transitionend' 事件，或直到 Promise 解析（如果 Promise 被拒绝，则变形将中止）。
重新计算最终元素容器的大小和位置以检查它们是否已更改。
获取最终元素的纵横比和位置。
启动动画。

关于 cancel() 函数（morph() 调用返回值）

如果在步骤 1 到 11 之间调用返回的 cancel 函数，则变形将中止（如果 cancel 在步骤 4 之后出现，则仍将调用 toggle 函数），并且返回值将为 **false**。
如果在动画开始和结束之间调用 cancel 函数，则动画将反转，并且返回值将为 **true**。
如果在动画结束之后调用 cancel 函数，则不会发生任何事情，并且返回值将为 **false**。

示例

发现错误？在浏览器中编辑此页面

1. 简介

2. 基本用法

3. 变形生命周期

4. 示例