不能在缩放0和1之间使用css转换
Can't transition between scale 0 and 1 with css transitions
我想让一个图像在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,但这是不工作。谢谢你告诉我为什么
问题是,它从来没有机会得到开始类,它直接到结束类。将结束类更改设置为超时(甚至为零毫秒!)将欺骗它同时执行两个类更改:
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转换没有响应
- 将webkit从CSS转换为JavaScript
- css转换高度不起作用
- 鼠标悬停时的css转换
- CSS转换立即进入最终状态
- 选项卡式元素上的动画CSS转换
- 通过JS添加类时应用CSS转换
- 更好的解决方案HTML元素幻灯片从右侧CSS转换
- 使用JavaScript触发CSS转换
- 使用带有javascript的span创建CSS转换
- jQuery addClass中断延迟,或者jQuery延迟中断CSS转换,或者两者兼而有之
- CSS转换获胜't在没有“setTimeout”的情况下运行
- CSS转换后用新内容替换空白
- 如何在不使用css转换的情况下将jQuery animate与css3属性相结合
- CSS 转换不会在没有 setTimeout 的情况下运行
- 拖动和调整 CSS 转换元素的大小
- 当到达屏幕顶部时,jquery/css转换
- CSS-3转换错误,菜单出现卡住
- 在CSS转换期间显示元素的大小值
- 我可以检测任意CSS转换是否已经启动吗