css3 transitions: toggling css class doesn't transition top/left/bottom/right (due to :before or :after elements being added)

Question

I can't transition top/left/bottom/right on a div with this css:

 .question-part-1 {
        width: 260px;
        height: calc(100vh - 90px);
        position: absolute;
        background-color: #000891;
        box-shadow: 0 0 20px rgba(0,0,0,0.75);
        padding: 35px;
        z-index: 2;

        transition: all 300ms ease-in-out;

        &.disabled {
            background-color: #000891;
            height: calc(100vh - 130px);
            left: -70px;
            top: 40px;
            z-index: 1;

            h2, .option {
                opacity: 0.5;
            }
        }
    }

I am toggling the disabled class with jquery $('.question-part-1').toggleClass('disabled')

it's not relevant, it'd be several hundred lines that are irrelevant, and one line that is toggling the class — Devin Rhode, Nov 28 '18 at 22:56

score -2 · Answer 1 · edited Nov 29 '18 at 00:55

-2

You cannot transition top/left/bottom/right values on an element with position absolute, if it does not have a respective initial top/left/bottom/right value.

To fix the issue above, simply add top: 0px and left: 0px to the base class .question-part-1

edited Nov 29 '18 at 00:55

Samuel Liew

76,741
107
159
260

answered Nov 28 '18 at 22:27

Devin Rhode

23,026
8
58
72

css3 transitions: toggling css class doesn't transition top/left/bottom/right (due to :before or :after elements being added)

1 Answers1