css3 转换：切换 css 类不会转换顶部/左侧/底部/右侧（由于添加了 :before 或 :after 元素）[重复]

Posted 2023-03-06

【中文标题】css3 转换：切换 css 类不会转换顶部/左侧/底部/右侧（由于添加了 :before 或 :after 元素）[重复]

【英文标题】：css3 transitions: toggling css class doesn't transition top/left/bottom/right (due to :before or :after elements being added) [duplicate]

【发布时间】：2019-04-30 22:13:35

【问题描述】：

我无法使用这个 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') 切换禁用类

【问题讨论】：

FTR 我正在使用 jquery 3 更改课程

分享完整代码以便我们查看问题

不相关，有几百行不相关，有一行在切换类

【参考方案1】：

如果元素没有相应的初始上/左/下/右值，则不能在具有绝对位置的元素上转换上/左/下/右值。

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