a-transition
Browser compatible of the View Transition API.
Transition
Transitions dom elements between two state automatically.
Example
<a-transition> <div>Changing Content</div></a-transition>
Attributes
Name | Type | Default value | Description |
---|---|---|---|
name
|
string | ... |
Set a custom "view-transition-name" |
type
|
"size" | "animation" | "size" |
Whether the blur is enabled or not. |
Preview
Different example confugrations of adative elements.
By width & height
Using View Transition API
Define custom transition animations using CSS:
@keyframes move-out { to { transform: translateX(-100px); opacity: 0; }}
@keyframes move-in { from { transform: translateX(200px); opacity: 0; }}
::view-transition-old[<name>] { animation: 0.33s ease both move-out;}::view-transition-new[<name>] { animation: 0.33s ease both move-in;}
::view-transition-old(root),::view-transition-new(root) { animation: none;}