jquery - 动画关闭切换滑动面板？

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 和过渡来切换类

$(".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; 在切换之前和 left: 0; 在 .active 类上)。要使此硬件加速，您可以将 transform: translateZ(0); 添加到 .slide-panel 类，这也会激活它。
• 最后一个选择是使用二维变换 transform: translate(-350px,0) 它比 translate3d 有更好的支持，同时动画比 left 更平滑: 。