To source

a-transition

A wrapper element, which adapts its size to the size of its child.

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" | "transition" | "animation" "size"

What type of transition to use.

  • size: Transition just the size of the element.
  • transition: Usees the View-Transitions API
  • animation: Animate layout changes using CSS animations with the FLIP technique.

Preview

Different example confugrations of adative elements.

By width & height

Using View Transition API

Define custom transition animations using CSS:

MDN

@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;
}