变形工具 | Quasar 中文网

变形工具

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

¥You can morph one DOM element into another (with animation) or between two states of the same element using Quasar’s morph util described below.

或许也值得看看使用这个工具的 Morph 指令，但它使用起来更简单。

¥Might also be worth to look at the Morph directive which uses this util but it’s simpler to use.

基本用法(Basic usage)

¥Basic usage

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

该函数需要一个强制的 Object 参数，其中包含以下键：

¥The function expects one mandatory Object parameter with the following keys:

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

变形生命周期(Morphing lifecycle)

¥Morphing lifecycle

获取初始元素的宽高比和位置（如果提供了获取初始元素的函数，则会调用该函数）
¥Get the aspect and position of the initial element (if a function is provided for getting the initial element it will be called)
计算初始元素容器的大小和位置
¥Calculate the size and position of the container of the initial element
如果另一个变形器使用了相同的元素，则该变形器将被中止。
¥If another morphing was using the same element that morphing will be aborted
执行 onToggle() 函数（如果存在）
¥Execute the onToggle() function (if present)
重新计算初始元素容器的大小和位置，以检查它们是否发生变化
¥Recalculate the size and position of the container of the initial element to check if they are changed
在下一个 tick 中（为了让 Vue 处理状态变化），将识别最后一个元素（如果提供了获取最后一个元素的函数，则会调用该函数）。
¥In the next tick (to allow Vue to process the state changes) the final element will be identified (if a function is provided for getting the final element it will be called)
如果另一个变形器使用了相同的元素，则该变形器将被中止。
¥If another morphing was using the same element that morphing will be aborted
计算最终元素容器的大小和位置
¥Calculate the size and position of the container of the final element
如果提供了 waitFor 属性，则等待该毫秒数，等待 ‘transitionend’ 事件或直到 Promise 被解决（如果 Promise 被拒绝，则变形将中止）。
¥If a waitFor is provided, wait that number of milliseconds, for a ‘transitionend’ event or until the promise is resolved (if the promise is rejected then the morphing is aborted)
重新计算最终元素容器的大小和位置，以检查它们是否发生变化
¥Recalculate the size and position of the container of the final element to check if they are changed
获取最终元素的宽高比和位置
¥Get the aspect and position of the final element
启动动画
¥Start the animation

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

¥Regarding the cancel() function (the return value of a call to morph()):

如果在步骤 1 至 11 期间调用了返回的 cancel 函数，则变形过程将被中止（如果取消操作发生在步骤 4 之后，toggle function 函数仍将被调用），并且返回值为 false。
¥If the cancel function that was returned is called during steps 1 to 11 then the morphing will be aborted (the toggle function will still be called if the cancel comes after step 4) and the returned value will be false.
如果在动画开始和结束之间调用 cancel 函数，则动画将反转，返回值为 true。
¥If the cancel function is called between the start and end of the animation then the animation will be reversed and the returned value will be true.
如果在动画结束后调用 cancel 函数，则不会发生任何事情，返回值为 false。
¥If the cancel function is called after the end of the animation nothing will happen and the returned value will be false.

示例(Examples)

¥Examples

1. Introduction

2. 基本用法(Basic usage)

3. 变形生命周期(Morphing lifecycle)

4. 示例(Examples)