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•2mo 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•2mo ago

isnt there a new prop or something that lets u animate display prop? discrete something i forgot if it was experimental or not

ἔρως•2mo ago

yes, there is

glutonium•2mo 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•2mo ago

this

ἔρως•2mo ago

yup

glutonium•2mo ago

is this still experimental?

ἔρως•2mo ago

im not sure but in the end, it will still jump from block (or other) to none

glutonium•2mo 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•2mo ago

i think it is available so u r saying it will only animate from none to block but not the other way around?

ἔρως•2mo 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•2mo ago

Yep Firefox hasn’t implemented animating from display none with @starting-style Idk if it will work with content-visibility though

ἔρως•2mo ago

i will assume it wont

Peppa-pigOP•2mo 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-pigOP•2mo 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;
    }
}

.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.

Gaming

Programming

Failing to animate(using transition) something from display none to block on hover

Did you find this page helpful?