CSS3 过渡在开始之前似乎需要一个“热身”时间？我必须添加等待吗？答案

【问题标题】：CSS3 transitions seem to need a "warmup" time before they kick off? Do I have to add a wait?CSS3 过渡在开始之前似乎需要一个“热身”时间？我必须添加等待吗？
【发布时间】：2015-01-10 02:14:25
【问题描述】：

我有一个 CSS3 过渡，我缩小了元素的高度。我这样做是：

类中指定的 CSS3 过渡和目标高度（例如，类中的高度：5px）
将 height=$el.height() 分配给样式属性中的元素（例如，样式上的 height:100px）
向元素添加类
移除 style 属性中定义的高度
计算的 CSS 值从样式的 100 像素更改为类的 5 像素，这会触发过渡

我发现设置 CSS3 过渡触发器似乎存在延迟，如果步骤 #4 在 #3 之后过早完成，触发器将看到高度最初是自动的，而不是 100px，并且没有发生过渡（由于 CSS3 的另一个限制，您不能从 height: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/

在小提琴中，如果我在删除高度值之前添加 20 毫秒的延迟，则过渡有效。如果您注释掉该行并在添加类后立即调用 css('height','')，则速度太快且不会发生转换。

这是 CSS3 过渡的浏览器实现中的错误吗？或者我真的需要添加超时吗？

【问题讨论】：

可能最好避开类，直接设置高度。从 / 转换到 auto 永远不起作用
查看 jsfiddle - 它可以工作（因为我们将高度设置为 $el.height() 作为解决方法）。时间是唯一的问题。

标签： javascript css css-transitions

【解决方案1】：

一位同事帮我解决了以下解决方案，它调用了 addClass() 和 css() 高度重置之间的偏移：

$a.addClass('shrink');
$a.offset();
$a.css('height','');

这会在 addClass() 之后强制重绘，并确保类添加（和过渡设置）发生在高度更改之前。

http://jsfiddle.net/1escyLqf/3/

【讨论】：

【解决方案2】：

使用附加在 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>

【讨论】：