Question

如果我在我的选择器上默认设置translate3d属性，然后通过添加另一个类来更改translate3d，则会导致bounceOutBack立方缓动无效。它似乎只是默认为easeIn

.content {
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /*adding the below will mess up my bounceOutBack set above*/
    -webkit-transform: translate3d(0px, 0px, 0px);
}

如果您将此类添加到上面设置了translate3d的.content选择器，则easeOutback不起作用。我没有看到任何其他自定义缓动类型的这个问题。很抱歉没有创造一个小提琴看到这种情况发生。有谁知道为什么会这样？目前只在Chrome中测试。谢谢你的帮助。

.content.animate {
    -webkit-transform: translate3d(300px, 0px, 0px);
}

Answer 1

好吧，可能是某种Chrome bug。

现在可行了

.content {
    width:200px;
    height:200px;
    background-color:red;
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
    /*adding the below will mess up my bounceOutBack set above*/
    -webkit-transform: translate3d(0px, 0px, 0px);
}

body:hover .content {
    -webkit-transform: translate3d(300px, 0px, 0px);
}

fiddle

应用translate3d时出现CSS3 easeOutBack问题

1 个答案: