Question

我有一个简单的切换来打开我的网站上的幻灯片。我使用CSS来为幻灯片设置动画，并且一切都很好用，但是当有人关闭面板时，如何向面板添加动画？所以用动画滑入和滑出。

的jQuery

$(".toggle-slide-panel").click(function(){
  $(".slide-panel").toggle();
});

CSS

.slide-panel{
background-color: #cccccc;
width: 350px;
height: 100%;
position: fixed;
z-index: 9;
top: 0;
left: 0;
display: none;
animation: slide-panel 300ms;
}

@keyframes slide-panel{
from{
    margin-left: -350px;
    opacity: 0;
}

to{
    margin-left: 0;
    opacity: 1;
}
}

Answer 1

结帐此链接您可能需要为动画添加备用css。像这样的东西
动画方向：交替; / *或：正常* / https://css-tricks.com/snippets/css/keyframe-animation-syntax/希望它有所帮助:)。

Answer 2

我建议你不要使用CSS关键帧，而是依靠jQuery来制作动画。

您所要做的就是添加 jQuery UI 并使用以下JS代码：

$(".toggle-slide-panel").click(function(){
    $(".slide-panel").toggle('slide', {direction: 'left'});
});

看看这个jsFiddle：https://jsfiddle.net/NikolaosG/adwj6bfo/1/的具体例子。

Answer 3

正如其他人所说，我强烈建议您不要使用关键帧，因为支持相对较差（请参阅下面的编辑）。

相反，您可以使用相应的CSS和转换来切换类

$(".toggle-slide-panel").click(function(){
$(".slide-panel").toggleClass("active"); 
 });

和CSS：

.slide-panel{
transform: translate3d(-350px,0,0);
transition: 0.3s ease-in-out;
}
.active {
transform: translate3d(0,0,0);
}

您可以在this fiddle中试用，这是您提供的更新。

编辑：关于支持，我可能有点过快 - 根据caniuse.com对@keyframes和过渡的支持非常相似：
http://caniuse.com/#search=keyframes
http://caniuse.com/#feat=css-transitions
但就个人而言，我仍然倾向于转换@keyframes，但这可能只是因为我不习惯使用关键帧。

编辑2：
如果您担心支持旧版本，请注意以下几点：

如果您想使用translate3d（我之所以选择它是因为它是硬件加速的;即利用GPU并使动画更流畅），您可能需要考虑为各种浏览器使用前缀。可以在此处查看未加前缀和前缀的支持：http://caniuse.com/#search=translate3d
如果您想要几乎某些支持（对于支持转换的浏览器），您可以在切换前将translate3d与常规left属性（即left: -350px;）进行交换，并{{ 1 {}在left: 0;类上。要使此硬件加速，您可以向.active类添加transform: translateZ(0);，这也会激活它。
最后一种方法是使用2d变换.slide-panel，它比transform: translate(-350px,0)提供更好的支持，同时制作比translate3d更流畅的动画。

动画关闭切换滑动面板？

3 个答案: