Question

我有一个固定宽度的侧栏从右侧滑入，然后在解散时滑出。

我正在做的是将侧边栏的显示更改为阻止，并在用户点击时添加动画类。

我已经创建了一个关键帧，可以在.3s中向右移动它，但除非我使用javascript函数将显示设置恢复为无（300毫秒之后），否则它只会挂掉屏幕的右边缘。这有效，但看起来很酷，有没有更好的方法来做到这一点？

Jsfiddle：https://jsfiddle.net/wLL468jj/1/

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-100%);
    }
    100%{
        -webkit-transform: translateX(0%);
    }
}

这里是JS，它将一个类添加到右边的动画，然后将显示设置为无。

$("#popup").addClass('animate-right');
setTimeout(function(){ popup.style.display = "none" }, 300);

Answer 1

一种方法可能是挂钩css动画完成后发出的animationend事件（Reference）。

此事件在所有浏览器中都不是标准的，因此您可以使用Modernizr根据浏览器获取正确的事件名称。像这样：

var animEndEventNames = {
        'WebkitAnimation': 'webkitAnimationEnd',
        'OAnimation': 'oAnimationEnd',
        'msAnimation': 'MSAnimationEnd',
        'animation': 'animationend'
    },
    // animation end event name
    animEndEventName = animEndEventNames[Modernizr.prefixed('animation')];

现在，您可以使用变量animEndEventName并为该事件添加侦听器。这样的事情可能是：

   $("#popup").on(animEndEventName, function () {
        if (!$(this).hasClass('animate-right'))
            $(this).hide();
    });

这应该给你一个粗略的想法，你显然可能需要调整你的设置。

使用CSS转换从右侧更好地解决HTML元素幻灯片问题？

1 个答案: