How can I animate a DOM element using transitions with dynamic values?

I’ve been trying to animate DOM elements using transitions
alone, since I’ve read they’re better in many forms. However, My question is simple, Is there a way to pass dynamic values for an animation using transitions?
I basically don’t know how to do this, ie. I can only animate a DOM element by adding a class with fixed values as seen in this example
(Works well on webkit browsers)

As you can see in the CSS class:

.motion {
  left: 300px;
  top: 200px;
  position: absolute;

… The values for the animation are static, And I would like to know How can I pass parameters to a transition during runtime?
, (ie. a different value for left. for example)

I’ve tried to do it with jQuery through the .css()
method like this:

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '30', 'top': '100' });          

But for some reason the transition doesn’t get triggered. Why?

All help is immensely appreciated!

Problem courtesy of: jlstr


Alright, since your comments show that you like it, here is your answer:

Use jQuery Transit

It supports easing functions as you wish.

It has an animate
-like API, and it can fallback to animate
when CSS3
transitions are not supported.

Solution courtesy of: Florian Margaine


Maybe I’m not paying attention, but I don’t see anywhere a definition of transition properties, such as duration, easing, etc… I assume you have these on your CSS somewhere? If not, the thing won’t work.

You need to set 2 definitions: one for the transition itself, the other for the attributes you want transformed. It’s my pet peeve about CSS3
spec, that they have this convoluted way of transforming and transitioning. It’s really ill-conceived.

Discussion courtesy of: tim

jQuery Animate.

$("#square").animate({'left':'30px','top':'100px' }, "slow");

Discussion courtesy of: Etienne Dupuis

If you are using jQuery 1.6+ then you can try this to get animating behavior using .css()

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=30', 'top': '+=100' });          

From jQuery docs

As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value.

Discussion courtesy of: ShankarSangoli

If I get your point correctly, you want the transitions to use the value/values by the way of adding it/them to current value/value pairs: if so you should give the below method a try;

function clickButton() {
  $("#button1").click(function(event) {
    $("#square").css( { 'left': '+=' + 30, 'top': '+=' + 100 });

Discussion courtesy of: Doğan AHMETCİ

This recipe can be found in it’s original form on Stack Over Flow

责编内容来自:CSS3 Recipes (源链) | 更多关于

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » How can I animate a DOM element using transitions with dynamic values?

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录