Failing to animate(using transition) something from display none to block on hover
So this is some very simple code I have to replicate the problem I am having in my main project:
So I then import it in my main component. The problem occurs here is that this animates when I click the button to add it, but disappears without animating. When I add opacity: 0; to "test" and opacity:1 to "active", the opposite occurs. But none that animates both ways. I am aware that there are easier solutions(with keyframes, or using visibility), but I want to know why this doesnt work.
15 Replies
As I am sure you know, you can't animate between display block and display hidden. It is either visible or it isn't. You are attempting to get round this by using @starting style to set the opacity and, to some extent, this is working, but, as you say, only one way.
The reason that it does "animate" (transitions) when you click on the "add" the button is that you are have set a @starting-style with a starting opacity of 0.
Whilst @starting-style is normally only used on the initial load, there is an exception to this when updating from
display:none
which means that the @starting-style is implemented each time.
From mdn:
It is important to understand that an element will transition from its @starting-style styles when it is first rendered in the DOM, or when it transitions from display: none to a visible value. When it transitions back from its initial visible state, it will no longer use the @starting-style styles as it is now visible in the DOM. Instead, it will transition back to whatever styles exist for that element's default state.So, as you can see from that, it (the transition) works when going from display: none but not the other way round. One way to achieve the effect that you want might be to initially add a "non-active" class which sets the opacity to "0" when clicking on the "remove" button. Then, using the eventlistener "transitionend" remove both the "active" and "non-active" classes once the transition has finished.
isnt there a new prop or something that lets u animate display prop? discrete something
i forgot if it was experimental or not
yes, there is
Chrome for Developers
Four new CSS features for smooth entry and exit animations | Blog...
Learn about new capabilities that enable smooth transitioning of discrete animations and between the top layer
this
yup
is this still experimental?
im not sure
but in the end, it will still jump from
block
(or other) to none
MDN Web Docs
transition-behavior - CSS: Cascading Style Sheets | MDN
The transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.
i think it is available
so u r saying it will only animate from none to block but not the other way around?
no
im saying it will jump from one value to the other
also, i dont think that firefox supports the starting styles thingy
Yep Firefox hasn’t implemented animating from display none with @starting-style
Idk if it will work with content-visibility though
i will assume it wont
Sorry for replying late, I went to sleep after that
https://stackoverflow.com/a/78602113
This post shows basically what i am trying, the transition version of it, and it works both ways. The only difference is it starts in the document as display:something and not none, but you can see that it's transition from none to something is smooth.
Stack Overflow
Transitions on the CSS display property
I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content.
At the moment, it appears that CSS 3 transit...
@Chris while your appraoch works, I was determined to make mine work. It turns out it was a selector spcificity problem:
vs
Second one works. Note that I had to add opacity:0 to base class and opacity:1 to active otherwise there isnt an opacity to transition out to(which I said was on of the other ones which was working for the other half of cases).
The problem with the specificity was that with 0,2,0, the active opacity prop was overriding the @starting opacity. I didnt check the specificity because I hovered on vscode and it showed 0,1,0(Known bug) for the nested active class, but I really should known because thats css basics.