Question

我正在创建一个简单的CSS3滑块。在执行两个不同的属性转换时，特别是transform: scale3d和left，动画首先执行转换，然后跳转到左侧。

仅在动画完成时才会跳转。换句话说，如果你不断点击下一部分，那么过渡是平滑的。

我制作了一个jsFiddle，它似乎与jsFiddle的工作方式有关：http://jsfiddle.net/BdG4k

基本上，这是我的代码的格式：

#slider > * {
    margin-left: -270px;
    position: absolute;
    -webkit-transition: all 1s;
}
#slider .module.leftX {
    left: XX%;
    z-index: 45;
    -webkit-transform: scale3d(0.5, 0.5, 1);
}

注意：我只使用-webkit，直到我开始工作。然后我将添加-moz和-ms。

Answer 1

Aaron问题是您仅使用transform属性仅用于webkit浏览器。

在您的js文件slider.js中，您仅使用特定于Chrome的供应商前缀-webkit。尝试为IE添加-moz前缀用于IE。

$('#slider').ready( function() {
function slide(focus) {
var l1css = {
'opacity': 0.8,
'-webkit-transform': 'scale3d(0.5, 0.5, 1)',
'-moz-transform': 'scale3d(0.5, 0.5, 1)', /*for Firefox*/
'transform': 'scale3d(0.5, 0.5, 1)', /*for IE*/
'margin-left': '-135px',
'left': '19%'
};

请检查工作 Demo

CSS3 Jumpy动画？

1 个答案: