javascript - Can't transition between scale 0 and 1 with css transitions -
I want to create an image that is scaled down all the way in X, and then alert all the methods in X Doing classes (through javascript) are adding the pattern I use, works well for things like rotation, but I'm thinking that it only runs a full 360 degree. I'm not sure why this works:
CSS:
.scaleXStart {visibility: hidden; Z-index: 0; Consequently scaleX (.5); } .scaleXEnd {z-index: 3; Consequently scaleX (2); Transition: 1s conversion; }
Javascript:
a = document.query selector ('# myDiv'); A.className = 'scaleXStart'; A.className = 'scaleXEnd';
I thought it would work because it is adding and then a square is removed, so set the value to scaleX
to 0 and then 1 Will be done but it is not working. Thanks for any thoughts
The problem is, the chance of getting a starting class is never met It goes straight to the end class, putting the change of the last class into a timeout (even zero milliseconds!) Will move it in both classes to change:
Function animation ( ) {A = document.query selector ('# myDiv'); A.className = 'scaleXStart'; SetTimeout (function () {a.className = 'scaleXEnd';}, 0)} function ANNi2 () {a = document.query selector ('# myDiv'); A.className = 'scaleXStart'; A.className = 'scaleXEnd'; }
See what I mean here:
Comments
Post a Comment