Question

我想让一个图像在x in中一直向下缩放，然后在添加类时通过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';

我认为这样可行，因为它正在添加然后删除一个类，因此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/

无法通过css转换在0和1之间转换

1 个答案: