React/CSS Transitions Fail
In this approach I'm trying to do a very smooth transition which when a button is clicked a transition on Y's the transition comes on it's normal place. When I'ts clicked the transition hides con the Y's
25 Replies
(The variable showNav is just a from a button that's toggling the class navbar-fadein)
Your QUESTION is not clear enough.
What are the issues you're facing?
See #how-to-ask-good-questions
I'm trying to do a smooth transition when clicked. To hide and show. That's it. The issue is the CSS code which I think is being overwritten when it's clicked
Oh, I get that now.
Inspect the element when you click (When it should have the new class attached)
If it doesn't have the class attached, the issue is from the Js
If it has it, check the styles pane to see if the class is actually being overridden
If it is being overridden, then you can check where the overriding style is coming from or share a screenshot of the styles pane
Yes classes are attached
No classes overriding
Animation is ignored (seems like it) in a very instant way. The transition is being ignored, a way to check that part?
You can send screenshots of the style pane, showing the styles on the element.
Also, if you can share the code for the class ruleset and the key frames for the animation if there is
When clicked
When clicked again to hidde the navbar (class goes)
I'm only using the transition property
No keyframes
So, what you can do now it to send me a screenshot showing this part:
That will help me know better what is stopping it from running right
That's when it's active
That's when hidden
Hmm.. that's really weird
Are you using a js framework?
Maybe react?
When you click on the hamburger, do you set some state?
Yes is a state
Can I see the snippet of the hamburger button and where you use the state you set
here is the full context of the state I'm using
Oh!
Line 21 is the problem.
When an element leaves the DOM and comes back, with new properties, the properties will not be transitioned into.
And right now, you remove the
<nav /> from the DOM, because you remove the parent, so when it comes back, to the DOM, there is no transition occurring.
The best way to handle it right now is to restructure it in such a way that you don't have to remove it from the DOM at all, then your transition will work.
Quick test to understand what I mean, remove the className values on line 21 and test it, you'll see that it will work
I honestly think you don't need that line 21 though.
There's a second way to solve the issue:
Using @starting-style { }
However, it's not advisable to use it in production, as it is not at Baseline level of browser compatibility yet.
You can read up on it though for future purposes
https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-styleMDN Web Docs
@starting-style - CSS: Cascading Style Sheets | MDN
The @starting-style CSS at-rule is used to define starting values for properties set on an element that you want to transition from when the element receives its first style update, i.e. when an element is first displayed on a previously loaded page.
I see the logic in there now!, thank you so much for your help mister
You are welcome.
Glad I could help!