在标度0和1之间不能通过css转换进行转换 [英] Can't transition between scale 0 and 1 with css transitions

问题描述

我想让图片开始按比例缩小到x in，然后在添加类时（通过javascript），在x中动画化。我使用的模式适用于旋转等事情，但我认为这只是因为旋转完全360度。我不知道为什么这不起作用：

I want to make an image begin scaled all the way down in x in, and then animate all the way up in x when classes are added (via javascript). The pattern that I am using works well for things like rotate, but I am thinking this is only because rotate goes a full 360 degrees. I am not sure why this does not work:

CSS：

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

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

Javascript： b

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

我认为这将工作，因为它是添加然后删除一个类，所以 scaleX 属性将设置为0然后1，但这不工作。感谢您为什么提出任何想法

I would think this would work because it is adding and then remove a class, so the scaleXproperty would be set to 0 and then 1 but this is not working. Thanks for any ideas on why

推荐答案

问题是，它从来没有机会获得开始类，结束类。将结束类更改置于超时（即使为零毫秒！）将诱使它进行类更改：

The problem is, it never gets a chance to get the start class and it goes straight to the end class. Putting the end class change into a timeout (even zero milliseconds!) will trick it into doing the both class changes:

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/

这篇关于在标度0和1之间不能通过css转换进行转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！