我想让图像开始在 x 方向上一直缩小,然后在添加类时(通过 javascript)在 x 方向上一直向上设置动画。我使用的模式适用于旋转之类的东西,但我认为这只是因为旋转了 360 度。我不确定为什么这不起作用:
CSS:
.scaleXStart {
visibility: hidden;
z-index: 0;
transform:scaleX(.5);
}
.scaleXEnd {
z-index: 3;
transform: scaleX(2);
transition: transform 1s;
}
Javascript:
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';
我认为这会起作用,因为它会添加然后删除一个类,因此 scaleX
属性将设置为 0,然后设置为 1,但这不起作用。感谢您对原因的任何想法
最佳答案
问题是,它从来没有机会获得开始类(class),而是直接进入结束类(class)。将结束类更改设置为超时(甚至是零毫秒!)将欺骗它进行两个类更改:
function anim(){
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
setTimeout(function(){a.className = 'scaleXEnd';}, 0)
}
function anim2(){
a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';
}
关于javascript - 无法使用 css 转换在比例 0 和 1 之间转换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25069510/