CODEWITHSUNDEEP
javascripttypescriptfrontendcss-transitionssvelte
cheveuxdelin
cheveuxdelin

Reputation: 145

Svelte transition not working properly when going in

Two divs that have both transition:fade work properly on going out, but they just appear as going in, I don't understand this behavior... The transition work if I only specify in:transition, but I would like to have both stages of the transition

enter image description here

enter image description here

Upvotes: 0

Views: 4970

Answers (1)

cheveuxdelin
cheveuxdelin

Reputation: 145

Since the transitions are coming from the same element, the starting and ending animation get triggered and end at the same time, so there is no time for the starting animation to show. To fix this I added a delay on the starting animation:

<div out:blur={{ duration: 400 }} in:blur={{ delay: 400, duration: 400 }}>

and it works perfectly

Upvotes: 3

Related Questions