仅使用CSS在位置之间制作动画?

时间:2012-06-20 18:07:53

标签: javascript css animation css3 css-transitions

我想在div的“默认”状态/位置之间设置动画。例如:

绝对定位在一个类中,位于屏幕的 left 上。通过JS(或替换)删除类,现在位置相对。默认的相对位置实际上位于屏幕的另一侧。我想动画一下。

类似于底座的东西,各种div作为显示内联中的图标,在底座上水平居中。如果我“删除”其中一个图标,其余的将转移到重新定位。我想让它们动起来,以填补空白。

转换:一切都不起作用(我假设因为该位置没有预定义的值)所以这甚至可能吗?有JS解决方案吗?

2 个答案:

答案 0 :(得分:3)

这可能与你描述它的方式完全一致。这是一个如何完成的实例。

http://jsfiddle.net/nDr4y/3/

您也可以从css中删除转换,并使用纯JS使用jquery to animate元素。语法如下所示:

// in the object are the css properties you want to animate,
// the second argument is how long you want it to take in ms
$('.el').animate({ left: 100 }, 1000);

答案 1 :(得分:0)

您只需要找出目标坐标并使用jQuery或您使用的任何框架进行设置。除此之外,它完全有可能。

http://jsfiddle.net/Kd72u/