Transition not working when display block and none

user_18657948 0
Viewed 22

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
1 Answers

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>

user_124840980
Related