a-transition

Lit

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:

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