我遇到了一个奇怪的问题。我正在我的js -only灯箱工作，以支持多个图像(https://github.com/felixhagspiel/jsOnlyLightbox为那些感兴趣的人)。所以我没有使用jQuery。现在我想添加通过css3过渡添加动画的可能性。我所做的是在单击next箭头后，将类jslghtbx-animating-next添加到灯箱内的图像中。图像具有transition: all .6s ease-in-out;属性，而jslghtbx-animating-next类只包含margin-left: -100%;。但是图像不是动画的，它只是弹出到新的位置。另一方面，当我使用不透明度，它工作。当我通过firebug应用margin-left属性时，动画也可以工作。我想也许是因为图像默认有margin-left: auto;，但删除它并没有奏效。
Testingserver: http://testing.felixhagspiel.de/index.html
压缩文件:http://testing.felixhagspiel.de/jsOnlyLightbox.rar
你必须点击标题"使用组显示多张图片"下面的一张图片，然后点击右箭头(到目前为止只有下一个功能在那里)。为了更容易调试，我还添加了5秒的延迟。
任何帮助将是伟大的!
这是(很不幸，在我看来)不可能与CSS过渡动画页边距(或其他任何东西，对于这件事)从"auto"到数值。也许可以用JavaScript来实现;