> > I am developing an iPhone-optimized website and testing it on Safari 3.1.2 >> on Windows. For some elements in the website I am applying implicit >> animation using -webkit-transition style. >> >> So basically, I have elements like this: >> >> <div style="-webkit-transition: left 2s linear;">...</div> >> >> that sometimes are present in the document from the very beginning and >> sometimes are loaded from another document and injected in DOM. >> >> In the first case animation happens as expected, however when divs are >> injected using JavaScript, -webkit-transition seems to be ignored (there's >> no animation). >> > > Transitions are not run when elements are first added to the DOM; they only > run when style properties change from one value to another value. >
Yes, I forgot to mention that property is changed from JavaScript code immediately after injection. I'm executing the code below immediately after injecting element referred by toPage: console.log('Before: ' + fromPage.id + ' -> ' + toPage.id + ' (' + backwards + ')'); console.log('F.left: ' + fromPage.style.left); console.log('T.left: ' + toPage.style.left); console.log('F.transition: ' + fromPage.style.webkitTransition); console.log('T.transition: ' + toPage.style.webkitTransition); if (!fromPage.style.left) { fromPage.style.webkitTransition = ''; fromPage.style.left = "0%"; fromPage.style.webkitTransition = 'left 2s linear'; } if (!toPage.style.left) { toPage.style.webkitTransition = ''; toPage.style.left = backwards ? "-100%" : "100%"; toPage.style.webkitTransition = 'left 2s linear'; } toPage.setAttribute("selected", "true"); scrollTo(0, 1); clearInterval(checkTimer); fromPage.style.left = backwards ? "100%" : "-100%"; toPage.style.left = "0%"; console.log('After: ' + fromPage.id + ' -> ' + toPage.id + ' (' + backwards + ')'); console.log('F.left: ' + fromPage.style.left); console.log('T.left: ' + toPage.style.left); console.log('F.transition: ' + fromPage.style.webkitTransition); console.log('T.transition: ' + toPage.style.webkitTransition); And this results in having this in the console: Before: login -> home (undefined) F.left: T.left: F.transition: T.transition: After: login -> home (undefined) F.left: -100% T.left: 0% F.transition: T.transition: I.e. style.webkitTransition is never defined. Any clues why? > Moreover, in the Safari's inspector I could see this: >> >> -webkit-transition: condensed 2s linear; >> >> What does this "condensed" mean and how could I force usage of the style >> after injection? >> > > This is a bug, and I believe has been since fixed. I recommend you test > with a nightly build, or at least the Safari 4 beta. Thanks for the clue. The tricky thing is that this does not work on iPhone either and updating Mobile Safari is not that easy. I looked to the inspector for the case without injection being made, and it turns out that it also has "condensed" there (and animation is performed fine in this case). S.
_______________________________________________ webkit-dev mailing list webkit-dev@lists.webkit.org http://lists.webkit.org/mailman/listinfo.cgi/webkit-dev