LiveView and enter / leave transitions?

Phoenix Forum Questions / Help
, ,
3

Thanks, but the issue is also about the ability to change a property once the transition has completed. Here’s some further illustration from Enter & leave transitions | Sebastian De Deyne :

Broadly speaking, there are two ways to implement enter & leave transitions:

  • Just use the transition CSS properties
  • Animations with JavaScript (either by modifying CSS properties, with the web animation API, or with third-party animation libraries)

Unfortunately, transition doesn’t cut it. Here’s what we need for our dropdown list transition:

  • When the dropdown opens, set it’s display property to block , then set transition opacity from 0 to 1
  • When the dropdown closes, transition opacity from 1 to 0 , then set it’s display property to none

We can’t build this with CSS transitions alone, because there’s no way to change the display value before or after the transition happened. I don’t like JavaScript animations for these things in JavaScript either, because it couples your JavaScript to CSS and vice-versa.

This is the scenario supported explicitly by Vue, React and other frameworks.

Actually I just noticed that you asked a similar question here: LiveView: Are there any clever techniques to do 'removal' animations?

3 Likes