反向 CSS3 过渡答案

【问题标题】：Reverse CSS3 transition反向 CSS3 过渡
【发布时间】：2013-06-12 20:43:28
【问题描述】：

http://micheresources.com/html/j-crew-slider/

我想知道如何反转动画？当您将鼠标悬停在左侧的每个导航项目上时，您会注意到当您将鼠标悬停在下一个项目上时，黑条只是捏到左上角而不是向左滑动。如何让它像滑入一样滑出？

黑条是<a> 标记，在悬停时应用activeSlide 类时附加到每个导航项，然后在下一次悬停时移除。

jQuery:

$(document).ready(function () {
    function activateItem(index) {
        $('#slideshow-nav').children('li').each(function (i) {
            var $item = $(this);
            if (i == index) {
                if ($item.children('a').length == 0) {
                    $item.append('<a href="#">' + titles[i] + '</a>');
                }
            } else {
                $item.children('a').hide(400, function() {
                    $item.children('a').remove();
                });
            }
        });
    }

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle({
        fx:         "scrollVert",
        rev:            "scrollVert",
        speed:          600,
        timeout:        0,
        pagerEvent:     "mouseover",
        pager:          "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li><span>" + titles[index] + "</span></li>";
        },
        onPagerEvent: function (index) {
            activateItem(index);
        }
    });
    activateItem(0);
});

CSS：

#slideshow-nav li a {
    background-color: #000;
    width: 285px;
    margin-top: -1px;
    padding: 30px 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    color: #fff;
    text-decoration: none;
    position: absolute;
    left: -285px;
    -webkit-transition: left 500ms ease;
    -moz-transition: left 500ms ease;
    -o-transition: left 500ms ease;
    transition: left 500ms ease;
}
    #slideshow-nav li.activeSlide a { left: 0; }

【问题讨论】：

贴出设置activeSlide的代码。
activeSlide 是 jQuery Cycle 插件的一部分。应用于当前幻灯片对应的导航项。
那么我不知道该告诉你什么。尝试不使用该插件，它可能会以破坏 CSS 转换的方式悄悄地修改 DOM。这正是过时的 jQuery 插件非常糟糕的原因。您应该能够在滚动照片查看器上使用与菜单上的黑色滑块类似的 CSS 逻辑。
它并没有过时，它在 GitHub 上积极维护，最后一次更新是 2 个月前。动画可以反转，可能使用 jQuery，但不知道该怎么做。我用我当前的代码更新了 OP，当悬停在下一个导航项上时，它会在 <a> 标签上为 .remove() 设置动画，但它需要向左滑动而不是捏合。
我很高兴你让它工作。我在 Chrome 中查看，动画确实使用了 CSS 转换（而不是 jQuery/JS 在循环中设置 DOM），所以看起来不错

标签： css animation transition reverse

【解决方案1】：

请看下面代码中的重要部分，我认为您只需要在.remove() 中添加计时即可

Working Example

$(document).ready(function () {
    function activateItem(index) {
        $('#slideshow-nav').children('li').each(function (i) {
            var $item = $(this);
            if (i == index) {
                if ($item.children('a').length === 0) {
                    $item.append('<a href="#">' + titles[i] + '</a>');
                }
            } else {
                    $item.children('a').remove('slow'); // <-----Important bit
            }
        });
    }

    var titles = ["New Styles", "June PVE", "Double Hostess Rewards"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle({
        fx:         "scrollVert",
        rev:            "scrollVert",
        speed:          600,
        timeout:        0,
        pagerEvent:     "mouseover",
        pager:          "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li><span>" + titles[index] + "</span></li>";
        },
        onPagerEvent: function (index) {
            activateItem(index);
        }
    });
    activateItem(0);
});

【讨论】：

@Eli 这发生在我们最好的人身上。