我有一个CSS3过渡，我收缩元素的高度。 我是这样做的：
在类上指定的CSS3过渡和目标高度（例如，高度：类中的5px） 将height = $ el.height（）指定给样式属性中的元素（例如，高度：样式上的100px） 将类添加到元素 删除style属性中定义的高度 计算出的CSS值从样式的100px变为类的5px，从而触发转换我发现的是设置CSS3转换触发器似乎有延迟，如果＃3之后的第4步太快完成，触发器将看到高度最初是自动而不是100px，并且没有发生转换（由于CSS3的另一个限制，你无法从高度：auto转换为height：x）。
这是实际的代码：
$(document).ready(function() { $a = $('#box'); // height:auto, not specified $a.css('height',$a.height()); // height:100px on style; $a.addClass('shrink'); // height:100px on style, height:5px on class $a.css('height',''); // height removed from style, falls back to 5px on class });这是一个JSFiddle演示这个问题： http ： //jsfiddle.net/1escyLqf/2/
在小提琴中，如果我在移除高度值之前添加20ms的延迟，则转换有效。 如果您在添加类之后立即注释该行并调用css（'height'，''），则它太快并且不会发生转换。
这是CSS3过渡的浏览器实现中的错误吗？ 或者我真的需要添加超时？
I have a CSS3 transition where I shrink the height of an element. I'm doing this by:
CSS3 transition and destination height specified on class (e.g. height:5px in class) Assign height=$el.height() to element in style attribute (e.g. height:100px on style) Add class to element Remove the height defined in style attribute Computed CSS value changes from style's 100px to class's 5px, which triggers a transitionWhat I'm discovering is that there seems to be a delay on setting the CSS3 transition trigger, and if step #4 is done too soon after #3, the trigger will see that height is initially auto instead of 100px, and no transition happens (due to another limitation of CSS3, you can't transition from height:auto to height:x).
Here's the actual code:
$(document).ready(function() { $a = $('#box'); // height:auto, not specified $a.css('height',$a.height()); // height:100px on style; $a.addClass('shrink'); // height:100px on style, height:5px on class $a.css('height',''); // height removed from style, falls back to 5px on class });Here's a JSFiddle demonstrating the issue: http://jsfiddle.net/1escyLqf/2/
In the fiddle, if I add a delay of 20ms before removing the height value, the transition works. If you comment that line out and call css('height','') immediately after adding the class, it's too fast and no transition happens.
Is this a bug in browser implementation of CSS3 transitions? Or do I really need to add in a timeout?
最满意答案
使用动态起始高度附加在jQuery中的CSS3动画创建此项。
jQuery
获得盒子高度：
var boxHeight = $('#box').height();创建动画并将其应用于缩小类。 从变量中获取起始高度。
var animation = ' <style type="text/css"> .shrink { -webkit-animation: shrink 12s forwards; animation: shrink 12s forwards; } @-webkit-keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } } @keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } } </style>';将样式附加到<head>
$('head').append(animation);完整的例子
$(document).ready(function() {
var boxHeight = $('#box').height();
var animation = '<style type="text/css"> .shrink { -webkit-animation: shrink 12s forwards; animation: shrink 12s forwards; } @-webkit-keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } } @keyframes shrink { 0% { height:' + boxHeight + 'px; } 100% { height: 5px; } }</style>';
$('head').append(animation);
});
#box,
#box2 {
background: red;
margin: 10px;
}
.shrink {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="box" class="shrink">
<p>make height</p>
<p>make height</p>
<p>make height</p>
<p>make height</p>
</div>
A colleague helped me out with the following solution, which calls an offset between the addClass() and the css() height-reset:
$a.addClass('shrink');
$a.offset();
$a.css('height','');
This forces a redraw after addClass(), and ensures that the class addition (and transition set-up) occurs before the height change.
http://jsfiddle.net/1escyLqf/3/
更多推荐
发布评论