Javascript Can'；使用css转换在缩放0和1之间进行t转换

我想让一个图像开始在x中向下缩放，然后在添加类时（通过javascript）在x中向上移动。我使用的模式对于旋转这样的事情很有效，但我认为这仅仅是因为旋转完全是360度的。我不确定这为什么不起作用：

CSS:

.scaleXStart {
    visibility: hidden;
    z-index: 0;
    transform:scaleX(.5);
}

.scaleXEnd {
    z-index: 3;
    transform: scaleX(2);
    transition: transform 1s;
}

a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';

Javascript:

.scaleXStart {
    visibility: hidden;
    z-index: 0;
    transform:scaleX(.5);
}

.scaleXEnd {
    z-index: 3;
    transform: scaleX(2);
    transition: transform 1s;
}

a = document.querySelector('#myDiv');
a.className = 'scaleXStart';
a.className = 'scaleXEnd';

---

我认为这是可行的，因为它先添加然后删除一个类，所以

scaleX

属性将设置为0，然后设置为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';
}

---

明白我在这里的意思了：

你能把你的代码放到一个JSFIDLE中，这样我们就可以调整它了吗？谢谢，它应该是

querySelector

而不是

querySelector

，最后一行出现语法错误。试着先把这些修好。罪魁祸首很可能是您正在同步更改

类名

，因此就浏览器而言，您每次都将其设置为

'scaleXEnd'

。尝试将最后一行包装在

setTimeout

中。谢谢，这些语法错误正是我将代码复制到SO的结果。您的观点是这样同步设置类？我想它们会立即被设置并归类为已更改。啊，在我发布答案后2分钟阅读@univerio的评论-你应该写出来。是的。这很有效。有没有更干净的方法，我是说，这不算是黑客吗？无论哪种方式，这都是相当干净的，我想这似乎并不比添加某种回调更干净。是的，这是一种黑客的方式，但由于您更改类的性质（考虑到每个浏览器都有自己的JS实现，您的原始代码可能在某些浏览器中工作！）。我现在能想到的唯一自然方法是在默认情况下将start类添加到div中，并使用JS仅添加end类：（当然，使用此代码，动画只工作一次）