Chrome：CSS 和 JS 过渡无法正常工作

Question

我有三张图片 img1、img2 和 img3（3 张图片）。它的初始位置分别为-50% 绝对右上角和左上角。当我将位置更改为static 时，使用转换2s 它实际上需要移动到中心。

问题在进行过渡时，正在捕捉某些镀铬（在某些笔记本电脑的镀铬中）。我知道是什么导致过渡中断。

这是我的 jQuery 代码。

        $(".middle-fixed-coming-soon-top").css({"top": "0px"});
        $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-coming-soon-top").css({"position": "static"});
            // code to execute after transition ends
        });

        $(".middle-fixed-organics-left").css({"left": "333px"});
        $(".middle-fixed-organics-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-organics-left").css({"position": "static"});
            $(".middle-fixed-organics-left .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

        $(".middle-fixed-tagline-right").css({"right": "333px"});
        $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-tagline-right").css({"position": "static"});
            $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

我是 jQuery 的新手。任何人都可以帮忙吗？提前致谢。

编辑
当我第二次或更多次重新加载时会发生这种情况。

Answer 1

我注意到的最重要的事情是您正在将一个元素从 position: absolute 切换到 position: static。这意味着它从不影响周围的内容转变为将其他一切都排除在外。我会使用相对而不是绝对，并完全取出静态开关。从那里，您应该只需要重新调整左/上定位。下面的代码应该处理所有的 JS 端，只是 CSS 需要 position: absolute 来切换到 position: relative。

        $(".middle-fixed-coming-soon-top").css({"top": "0px"});
        $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            // code to execute after transition ends
        });

        $(".middle-fixed-left").css({"left": "0px"});
        $(".middle-fixed-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-left .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });

        $(".middle-fixed-tagline-right").css({"right": "0px"});
        $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',  function(e) {
            $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto");
            // code to execute after transition ends
        });