Question

icon-open的转换对我来说很好，但包装器的转换不起作用。 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;
}

根据MDN对position: relative的说明：

此关键字列出所有元素，就像元素未定位一样，然后调整元素的位置，而不更改布局

除非您明确设置，否则

relative没有初始左侧或顶部位置的初始概念。

一个Css过渡是跳跃而另一个很好

1 个答案: