一个 Css 过渡不稳定，而另一个工作正常

Question

图标打开的过渡对我来说很好，但包装器的过渡不起作用。 Wrapper 只是简单地从左跳到右，而不使用过渡。我正在使用 Jquery 作为动画。这是一个 jsfiddle https://jsfiddle.net/5vyLd7nf/ 。

.icon-open{
    position: absolute;
    top: 2.7em;
    left: .4em;
    font-size: 2em;
    z-index: 5;
    transition: left 0.5s ease;
}
.wrapper{
    top:4.1em;
    position: relative;
    width: 80em;
    height: 800em;
    z-index: 2;
    background: beige;
    transition: left 0.5s ease;

}
.open2{
    left: 16.1em;
}

.open3 {
    left: 8.3em
}

$(document).ready(function () {
    $(".icon-open").click(function () {
        $(".wrapper").toggleClass("open2");
        $(".icon-open").toggleClass("open3");
    });
});

Answer 1

需要将.wrapper的初始位置设置为0（见updated jsfiddle）：

.wrapper {
    left: 0;
    top:4.1em;
    position: relative;
    width: 80em;
    height: 800em;
    z-index: 2;
    background: beige;
    transition: left 0.5s ease;
}

根据 position: relative 上的 MDN：

This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout

relative 没有关于它的初始位置的初始概念，除非您明确设置它。

一个 Css 过渡不稳定，而另一个工作正常

One Css transition is jumpy while the other works fine

jquery

html

css

css-transitions

transition