Geek asks and answers

Why are style assignments made right after they are not animated?

Opening this violin on Webkit will show what I'm talking about.

How can I specify the style of an element when it is first specified, and then its final state?

It should be possible to fully specify a one-stage animation (without having to run it with @keyframes), but it seems that at the moment I have to deal with a specific oddity related to the implementation. Note how animation doesn’t work in Firefox ...

+5
source share
2 answers

There seems to be the same problem as described here: CSS3 transition to dynamically created elements

So

$("#one").on('click',function(){
    var word = $("<div style='opacity: 0; height:0'>word</div>");
    $('body').prepend(word); 
    window.getComputedStyle(word[0]).getPropertyValue("top");
    word.css({height: 100, opacity: 1});
});

: http://jsfiddle.net/wWnnH/3/

+2

jQuery.animate()

word.animate({height: 100, opacity: 1}, 5000);

CSS, webkit mozilla. CSS3, .

+1

More articles:


All Articles