变形实用程序 | Quasar Framework 中文网

变形实用程序

v1.13+

您可以将一个DOM元素变形为另一个（使用动画），或者使用Quasar的变形实用程序在同一元素的两个状态之间变形。

也许还值得一看变形指令，它使用了这个util，但它更易于使用。

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

该函数需要一个具有以下键的强制对象参数：

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

变形生命周期

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

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

例子

阅读更多?