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.
Might also be worth to look at the Morph directive which uses this util but it’s simpler to use.
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
The function expects one mandatory Object parameter with the following keys:
| Name | Type | Default value | Description |
|---|---|---|---|
| from | DOM | - | (required) A DOM element or CSS selector or a function returning a DOM element |
| to | DOM | - | Same as “from”; if “to” is missing, then it is assumes that it is the same as “from” |
| onToggle() | Function | - | A synchronous toggle function that will be executed immediately after the state of the initial element is saved. Use a function that toggles the state of the components so that the destination element becomes available. |
| waitFor | Number/‘transitioned’/Promise | 0 | A number, ‘transitionend’ or a Promise - it will delay animation start for that number of milliseconds, or until a ‘transitionend’ event is emitted by the destination element, or until the promise is resolved (if the promise is rejected the morphing will abort, but the toggle function was already called) |
| duration | Number | 300 | The duration in milliseconds for the animation |
| easing | String | ‘ease-in-out’ | The timing function for the animation (CSS easing format) |
| delay | Number | 0 | The delay in milliseconds for the animation |
| fill | String | ‘none’ | The fill mode for the animation |
| style | String/Object | - | The extra style to be applied to the morphing element while it is animated (either as string or a CSSStyleDeclaration object) |
| classes | String | - | The extra classes to be applied to the morphing element while it is animated (as string) |
| resize | Boolean | false | Force resizing instead of the default scaling transformation |
| useCSS | Boolean | false | Force use of CSS instead of the Animation API |
| hideFromClone | Boolean | false | By default a clone of the initial element is used to fill the space after the element is removed - set this flag if the initial element is not removed or resizing of the space occupied by the initial element is not desired |
| keepToClone | Boolean | false | By default the final element is removed from it’s final position to be animated - set this flag to keep a copy in the final position |
| tween | Boolean | false | By default the final element is morphed from the position and aspect of the initial element to the ones of the final element - set this flag to use an opacity tween between the initial and final elements |
| tweenFromOpacity | Number | 0.6 | If using tween it is the initial opacity of the initial element (will be animated to 0) - the initial element is placed on top of the destination element |
| tweenToOpacity | Number | 0.5 | If using tween it is the initial opacity of the destination element (will be animated to 1) |
| onEnd(direction, aborted) | Function | - | A function that will be called once the morphing is finalized - receives two params: “direction” is a string (‘to’ if the morphing was finished in the final state or ‘from’ if it was finished in the initial state) and “aborted” is a boolean (true means that the animation was aborted) |
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
- Execute the onToggle() function (if present)
- Recalculate the size and position of the container of the initial element to check if they are changed
- 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
- 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
Regarding the cancel() function (the return value of a call to morph()):
- If the
cancelfunction that was returned is called during steps 1 to 11 then the morphing will be aborted (thetoggle functionwill still be called if the cancel comes after step 4) and the returned value will be false. - If the
cancelfunction is called between the start and end of the animation then the animation will be reversed and the returned value will be true. - If the
cancelfunction is called after the end of the animation nothing will happen and the returned value will be false.