transitions

71 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Transition between elements

Transition between two elements using v-if/v-else/v-else-if, ensuring only one element is shown at any given moment. By default, entering and leaving elements animate simultaneously, which may require making them position: absolute to avoid layout issues when both are in the DOM.

Transition mode prop

The mode prop on <Transition> controls animation orchestration between elements. mode="out-in" animates the leaving element out first, then inserts the entering element after the leaving animation finishes. mode="in-out" is also supported but less frequently used. Default behavior animates entering and leaving simultaneously.

Transition with dynamic components

<Transition> can wrap dynamic components using <component :is="activeComponent">. This allows applying enter/leave animations when switching between different components.

Dynamic transition name prop

<Transition> props like name can be dynamic using v-bind syntax: <Transition :name="transitionName">. This allows dynamically applying different transitions based on state changes when CSS transitions/animations are defined using Vue's transition class conventions.

Transition with key attribute

Use the key attribute on elements inside <Transition> to force re-render when needed for transitions to occur. Without the key, Vue may update only the text node without creating a new element, preventing the transition. With the key, Vue creates a new element when the key changes, giving <Transition> two different elements to transition between.

Transition component slot content requirement

<Transition> only supports a single element or component as its slot content. If the content is a component, the component must also have only one single root element.

CSS Transitions example

Basic CSS transition example: <Transition name="fade"> with CSS .fade-enter-active, .fade-leave-active { transition: opacity 0.5s ease; } and .fade-enter-from, .fade-leave-to { opacity: 0; }

CSS Animations example with keyframes

CSS animation example using @keyframes: <Transition name="bounce"> with .bounce-enter-active { animation: bounce-in 0.5s; } .bounce-leave-active { animation: bounce-in 0.5s reverse; } @keyframes bounce-in { 0% { transform: scale(0); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

Slide fade CSS transition example

Advanced multi-property transition example with different durations: .slide-fade-enter-active { transition: all 0.3s ease-out; } .slide-fade-leave-active { transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1); } .slide-fade-enter-from, .slide-fade-leave-to { transform: translateX(20px); opacity: 0; }

Custom transition classes with Animate.css

Combining Vue transitions with Animate.css library: <Transition name="custom-classes" enter-active-class="animate__animated animate__tada" leave-active-class="animate__animated animate__bounceOutRight"> <p v-if="show">hello</p> </Transition>

Nested transition with stagger delay

Example of nested transition with stagger effect: .nested-enter-active .inner, .nested-leave-active .inner { transition: all 0.3s ease-in-out; } .nested-enter-from .inner, .nested-leave-to .inner { transform: translateX(30px); opacity: 0; } .nested-enter-active .inner { transition-delay: 0.25s; }

Give your agent this brain