无法使用 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

问题是，它从来没有机会得到开始类，它直接到结束类。将结束类更改设置为超时(甚至为零毫秒!)将欺骗它同时执行两个类更改:

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/