我有一个隐藏的面板，通过使用jQuery向其添加一个类来显示，然后使用CSS动画来控制幻灯片的效果。
您可以查看小提琴here。
该面板在firefox中运行良好。但是在Chrome中单击以显示隐藏面板时它不会显示动画，然后当您关闭它并重新打开面板时动画开始工作。它只是在第一次加载面板时被打破。
下面是我的CSS，您可以在fiddle中看到我的其他代码：
.workIndvWrapper {
display: none;
z-index:9999;
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 75%;
background-color: #ff0000;
overflow-y: auto;
-webkit-box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05);
box-shadow: -3px 0 10px 0 rgba(0, 0, 0, 0.05);
-webkit-transition: .4s -webkit-transform ease-in-out;
-moz-transition: .4s -moz-transform ease-in-out;
transition: .4s transform ease-in-out;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
transform: translateX(100%);
-webkit-overflow-scrolling: touch; }
.close {
color:#fff;
font-size:20px;}
.showPanel {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
-webkit-overflow-scrolling: touch;}
#sauceThumb {cursor:pointer}