如何在不从 DOM 中移除元素的情况下滑动元素（可能是伪幻灯片）？

Question

我已经为这个问题苦苦挣扎了将近一个月，但没有成功。

假设我在 DOM 中有一个按钮和一个元素（如图像或...），

当我点击这个按钮时，元素必须滑动（左或右）。到目前为止，这很容易。

        $(button).on('click',function(){
           $('mySlidingElement').slideToTheLeft();
           // consider this works fine .
        });

但我不希望那个元素消失 !!

喜欢这张照片：

您看到图像向右滑动，但我并没有消失。而且这张图好像有两张！！！！！！

就像我想展示一个psudo或假滑动效果。

我可以使用 2 张图片，然后滑动前面的一张。这会奏效。但我不想这样做。

我不知道怎么问这个问题，如果我的问题不对，请见谅:(

注意：我使用的是 angularjs 和 jquery，我的幻灯片动画基于添加和删除 css 类/

非常感谢

Answer 1

看看这是否能解决您的要求:)

html

<div id="static"></div>

css

    * {
    padding:0px;
    margin:0;
}
#static {
    width:200px;
    height:200px;
    background:tomato;
    -webkit-transition: all 2s ease-in-out;
}
#static::after {
    content:"";
    width:200px;
    height:200px;
    background:orange;
    position:absolute;
    left:0px;
    top:0px;
    -webkit-transition: all 5s ease-in-out;
    opacity:0;
}
#static.plsSlide::after {
    content:"";
    left:100px;
    opacity:1;
}

jquery

$("#static").click(function () {
$(this).toggleClass("plsSlide");

});

我使用了颜色而不是图像。请将图像设置为此div的背景

DEMO