KPC
Kevin Powell - Community•3mo ago
Peppa-pig

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: 
import "./Test.scss"

const Test = () => {

    function addClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.add("active")
        }
    }
    function removeClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.remove("active")
        }
    }
  return (
    <div className='my-container'>
        <button className='btn btn-primary btn-lg' onClick={addClass}></button>
        <button className='btn btn-danger btn-lg' onClick={removeClass}></button>
        <div className='test'>Test</div>
    </div>
  )
}

export default Test

.test{
    
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        
        display: block;
    }
}
@starting-style {
    .test {
      opacity: 0;
    }
  }

.my-container{
    height:600px;
    width:100dvw
}
  
import "./Test.scss"

const Test = () => {

    function addClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.add("active")
        }
    }
    function removeClass(){
        const el=document.querySelector(".test")
        if(el){
            el.classList.remove("active")
        }
    }
  return (
    <div className='my-container'>
        <button className='btn btn-primary btn-lg' onClick={addClass}></button>
        <button className='btn btn-danger btn-lg' onClick={removeClass}></button>
        <div className='test'>Test</div>
    </div>
  )
}

export default Test

.test{
    
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        
        display: block;
    }
}
@starting-style {
    .test {
      opacity: 0;
    }
  }

.my-container{
    height:600px;
    width:100dvw
}
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
Chris Bolson
Chris Bolson•3mo ago
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. 
.non-active{
  opacity: 0;
}
.non-active{
  opacity: 0;
}
Then, using the eventlistener "transitionend" remove both the "active" and "non-active" classes once the transition has finished. 
function removeClass() {
    const el = document.querySelector(".test");
    if (el) {
    el.classList.add("non-active");
    el.addEventListener("transitionend",() => {
      el.classList.remove("active","non-active");
    }) 
    }
}
function removeClass() {
    const el = document.querySelector(".test");
    if (el) {
    el.classList.add("non-active");
    el.addEventListener("transitionend",() => {
      el.classList.remove("active","non-active");
    }) 
    }
}
glutonium
glutonium•3mo ago
isnt there a new prop or something that lets u animate display prop? discrete something i forgot if it was experimental or not
ἔρως
ἔρως•3mo ago
yes, there is
glutonium
glutonium•3mo ago
https://developer.chrome.com/blog/entry-exit-animations
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
glutonium
glutonium•3mo ago
this
ἔρως
ἔρως•3mo ago
yup
glutonium
glutonium•3mo ago
is this still experimental?
ἔρως
ἔρως•3mo ago
im not sure but in the end, it will still jump from block (or other) to none
glutonium
glutonium•3mo ago
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
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.
glutonium
glutonium•3mo ago
i think it is available so u r saying it will only animate from none to block but not the other way around?
ἔρως
ἔρως•3mo ago
no im saying it will jump from one value to the other also, i dont think that firefox supports the starting styles thingy
clevermissfox
clevermissfox•3mo ago
Yep Firefox hasn’t implemented animating from display none with @starting-style Idk if it will work with content-visibility though
ἔρως
ἔρως•3mo ago
i will assume it wont
Peppa-pig
Peppa-pigOP•3mo ago
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...
Peppa-pig
Peppa-pigOP•3mo ago
@Chris while your appraoch works, I was determined to make mine work. It turns out it was a selector spcificity problem: 
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        opacity: 1;
        display: block;
    }
}
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
    &.active{
        opacity: 1;
        display: block;
    }
}
vs 
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
   
}
.active{
        opacity: 1;
        display: block;
    }
.test{
    opacity: 0;
    margin: 200px;
    background-color: red;
    display:none;
    width:300px;
    height:300px;
    transition: all 3s linear;
    transition-behavior: allow-discrete;
    &:hover{
        opacity: 1;
        display: block;
    }
   
}
.active{
        opacity: 1;
        display: block;
    }
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.

Did you find this page helpful?