Hi @winged gyro. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#transition name and duration
runic hemlockBOT
In Astro, you can use the transition:name directive to specify a name for a pair of elements involved in a transition. This is useful when you want to identify corresponding view transition elements yourself. Here's an example:
<aside transition:name="hero">
However, there's no transition:duration directive in Astro. Instead, you can customize the duration of a transition by importing a built-in animation from astro:transitions and passing in customization options. For instance, you can customize the duration of the built-in fade animation like this:
import { fade } from 'astro:transitions';
<header transition:animate={fade({ duration: '0.4s' })}>
In this example, fade is a built-in animation and { duration: '0.4s' } is the customization option that specifies the duration of the transition.
If you want to use a custom name and a custom duration together, you would need to define your own animations for use with transition:animate. You can define both the forwards and backwards behavior, as well as new and old pages. Here's an example:
const anim = {
old: {
name: 'bump',
duration: '0.5s',
easing: 'ease-in',
direction: 'reverse',
},
new: {
name: 'bump',
duration: '0.5s',
easing: 'ease-in-out',
},
};
In this example, bump is the name of the animation and '0.5s' is the duration.
Sources:
- Customizing Animations (https://docs.astro.build/en/guides/view-transitions/#customizing-animations)
- Naming a Transition (https://docs.astro.build/en/guides/view-transitions/#naming-a-transition)