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?
Can be done with:
document.getElementById('container').style['-webkit-transition-duration'] = '500s';
See http://jsfiddle.net/z3bKD/2/.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With