Question

我正在尝试一次对一个元素做几个动画。我想translate元素到正确的cooridnates，这似乎是有效的，但我很难“增长”高度和宽度。使用这种语法，高度和宽度似乎没有动画，我的语法是否关闭？

width: 230px;
height: 476px;
-webkit-transform: translate(492px, 0px);
transition: width 2s, height 2s, 0.5s;
-webkit-transition: width 2s, height 2s, 0.5s;

目标是在0.5秒内将位置移动到正确的位置，并在2秒内将其扩展到全高。有什么建议吗？

Answer 1

您忘记了效果的“类型”，请参阅：

width: 230px;
height: 476px;
-webkit-transform: translate(492px, 0px);
transition: width 2s linear 0.5s, height 2s linear 0.5s;
-webkit-transition: width 2s linear 0.5s, height 2s linear 0.5s;

但是没有设置效果似乎没有任何改变，因为它有一个默认效果。

我发现您只使用了webkit转换而未使用正常转换，请参阅：

$("#box3.box").css({
    "-webkit-transform": "translate(-260px, -" + row1height + "px) scale(1)",
    "-webkit-transition-duration": "2s,2s,2s",
    "-webkit-transition-property": "height, width",
    "transform": "translate(-260px, -" + row1height + "px) scale(1)",
    "transition-duration": "2s,2s,2s",
    "transition-property": "height, width",        
    "height": "250px",
    "width": "250px"
});

请注意，我使用了-webkit-transition和transition，因为Chrome似乎仅适用于transition。

这是一个更新的Fiddle，可以在Chrome上使用

2d转换语法

1 个答案: