'Transition not working when display block and none

HTML You can see the below code which I am using but transition not working.

<div class="faq">
    <input type="radio" id="faq1" class="input" name="faqs">
    <label for="faq1">text 1</label>
    <div class="answer">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
    </div>
</div>
<div class="faq">
    <input type="radio" id="faq2" class="input" name="faqs">
    <label for="faq2">text 2</label>
    <div class="answer">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
    </div>
</div>

CSS Here is the CSS that I am using for the transition.

 .input, .answer
{
    display: none;
    transition: all 1s;
}
.faq input[type="radio"]:checked ~ .answer
{
    display: block;
    transition: all 1s;
}
desktop


Solution 1:[1]

Transition doesn't work with display none and block property. The reason for this is, display:none property is used for removing block and display:block property is used for displaying block. A block cannot be partly displayed. Either it is available or unavailable. That is why the transition property does not work.

Optionally, You can play with height and opacity, and much better if you are comfortable with javascript. You can make smooth animation with js.

Just in case you want to do this with CSS here is a way to make it work:

.input, .answer
{
    opacity: 0;
    transition: height 1s, opacity .5s;
    background: aqua;
    height: 0;
}
.faq input[type="radio"]:checked ~ .answer
{
    opacity: 1;
    height: auto;
    transition: height 1s, opacity .5s;
}
<div class="faq">
    <input type="radio" id="faq1" class="input" name="faqs">
    <label for="faq1">text 1</label>
    <div class="answer">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
    </div>
</div>
<div class="faq">
    <input type="radio" id="faq2" class="input" name="faqs">
    <label for="faq2">text 2</label>
    <div class="answer">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
    </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Suraj Sanwal

Related Questions