变形实用程序

您可以将一个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

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

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

变形生命周期

  1. 获取初始元素的方位和位置(如果提供了用于获取初始元素的函数,则将调用该函数)
  2. 计算初始元素容器的大小和位置
  3. 如果另一个变形正在使用相同的元素,则变形将被中止
  4. 执行onToggle()函数(如果存在)
  5. 重新计算初始元素的容器的大小和位置,以检查它们是否已更改
  6. 在下一个tick(允许Vue处理状态更改)中,将标识最后一个元素(如果提供了获取最终元素的函数,则将调用该函数)
  7. 如果另一个变形正在使用相同的元素,则变形将被中止
  8. 计算最后一个元素的容器的大小和位置
  9. 如果提供了一个waitFor,请等待该毫秒数,等待“transitionend”事件,或直到Promise得到解决(如果Promise被拒绝,则变形将中止)
  10. 重新计算最终元素的容器的大小和位置,以检查它们是否已更改
  11. 得到最后一个元素的方位和位置
  12. 启动动画
  • 如果在步骤1到11期间调用了返回的cancel函数,则变形将中止(如果在步骤4之后取消,则仍将调用toggle function),返回值将为false
  • 如果在动画的开始和结束之间调用cancel函数,则动画将反转,返回值将为true
  • 如果在动画结束后调用cancel函数,则不会发生任何事情,返回值将为false

例子