无法使用 css 转换在比例 0 和 1 之间转换答案

【问题标题】：Can't transition between scale 0 and 1 with css transitions无法使用 css 转换在比例 0 和 1 之间转换
【发布时间】：2014-08-01 07:03:08
【问题描述】：

我想让图像在 x 中开始一直缩小，然后在添加类时在 x 中一直向上设置动画（通过 javascript）。我使用的模式适用于旋转之类的东西，但我认为这只是因为旋转完整 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';

我认为这会起作用，因为它正在添加然后删除一个类，因此 scaleXproperty 将设置为 0 然后 1 但这不起作用。感谢您提供有关原因的任何想法

【问题讨论】：

您能否将您的代码发布在 JSFiddle 中以便我们对其进行调整？谢谢
嗯，它应该是querySelector 而不是queryselector，最后一行出现语法错误。尝试先修复这些。罪魁祸首很可能是您正在同步更改className，因此就浏览器而言，您每次都将其设置为'scaleXEnd'。尝试将最后一行包裹在 setTimeout 中。
谢谢，这些语法错误只是我将代码复制到 SO 的结果。你的意思是这样的类是同步设置的？我想它们会立即被设置并归类为已更改。
啊，在我发布答案 2 分钟后阅读 @univerio 的评论 - 你应该写的。

标签： javascript html css css-transitions

【解决方案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/

【讨论】：

是的。这行得通。有没有更清洁的方法，我的意思是，这不被认为是一种黑客行为吗？无论哪种方式，这都相当干净，我想它似乎并不比添加某种回调更干净。
是的，这是一种骇人听闻的方式，但是由于您更改类的性质，必须这样做（并且考虑到每个浏览器都有自己的 JS 实现，您的原始代码可能会工作在某些浏览器中！）。我现在唯一能想到的自然方法是默认将开始类添加到 div 并使用 JS 仅添加结束类：jsfiddle.net/shomz/nzJ8j/1（当然，动画只能使用此代码工作一次）跨度>