javascript - 无法使用 css 转换在比例 0 和 1 之间转换

Question

我想让图像开始在 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，但这不起作用。感谢您对原因的任何想法

Answer 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';
}

看看我的意思:http://jsfiddle.net/shomz/nzJ8j/