css3过渡：切换css类不会过渡上/左/下/右（由于添加了：before或：after元素）

Question

我无法使用此CSS在div上切换上/左/下/右：

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

我正在使用jquery $('.question-part-1').toggleClass('disabled')切换禁用的类

Answer 1

如果元素没有相应的初始顶部/左侧/底部/右侧值，则不能在绝对位置的元素上过渡顶部/左侧/底部/右侧值。

要解决上述问题，只需将top: 0px和left: 0px添加到基类.question-part-1