Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Changing webkit transition duration using javascript on iPad?

I am using web-kit transitions in an iPad app. They work great. But I was wondering what I would do to change the values of my transition using javascript.

#container {
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: ease-out;       
        }

What I would like to do:

<script>
    function func() {
        document.getElemeentById('container').transition.duration = 500;

   }
</script>

Is this possible?

like image 234
Tarek Avatar asked Nov 12 '10 18:11

Tarek


2 Answers

Can be done with:

document.getElementById('container').style['-webkit-transition-duration'] = '500s';

See http://jsfiddle.net/z3bKD/2/.

like image 193
Jakub Hampl Avatar answered Oct 11 '22 20:10

Jakub Hampl


Jakub's answer was good, but to update it, you can now set the transition duration directly as the transitionDuration property on an element's style. Tested and working on iOS Safari, OSX Safari, Chrome and Firefox. e.g.

document.getElementById('container').style.transitionDuration = '500s';

See http://jsfiddle.net/jkoudys/xa2oo1us/

like image 21
Josh from Qaribou Avatar answered Oct 11 '22 19:10

Josh from Qaribou