多个 HTML 元素的 CSS 转换未触发答案

【问题标题】：CSS transitions of multiple HTML elements not triggering多个 HTML 元素的 CSS 转换未触发
【发布时间】：2014-08-20 20:13:36
【问题描述】：

我有一个标题，我在设置滚动量后将其固定到页面顶部，并且希望在标题固定后对标题内的多个元素执行一组 CSS 转换：

标题高度从 100 像素缩小到 60 像素
标题图标从 50x50 缩小到 25x25
标题字体从 48px 缩小到 36px

#1 按预期工作，但当滚动目标被击中时，#2 和 #3 会立即改变，而不是为其大小设置动画。

我正在添加/删除一个类 .page-header-fixed 来修复/取消修复标头。

我在所有情况下都应用以下转换：

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;

对于标题本身（#1），我使用以下选择器来固定标题并更改高度：

#page-header-wrapper .page-header-fixed {
    position: fixed;
    height: 60px;
    top: 0;
}

而对于其他元素 (#2 & #3) 我正在使用这个

.page-header-fixed .hd-icon {
    width: 25px;
    height: 25px;
}
.page-header-fixed .hd-center {
    font-size: 36px;
}

我希望 .hd-icon 的动画从 50x50->25x25 和 .hd-center 动画从 48px->36px 当标题固定但两者都会立即改变。标题高度从 100px->60px 动画。

是否存在我没有正确执行的多个并发转换，或者我定位元素的方式？

JSFiddle 演示在这里http://jsfiddle.net/9n90802j/

【问题讨论】：

标签： css css-transitions transition

【解决方案1】：

这个有效：http://jsfiddle.net/Whre/9Lk5ym52/

我做了以下更改：

JS：

window.setTimeout(function() {
    $("#page-header .hd-icon,#page-header .hd-center").addClass("scrolled");
},10);

分别removeClass()。

CSS：

.hd-icon.scrolled {
    width: 25px;
    height: 25px;
}

.hd-center.scrolled {
    font-size: 36px;
}

我实际上不知道问题是什么。我认为浏览器无法意识到这个子元素需要进行转换。我只知道如果没有setTimeout()，您的示例将无法工作。如果有人有想法，请告诉我！

【讨论】：

感谢您的解决方法。太糟糕了，需要 setTimeout()，但至少它有效。 :) 我的小提琴似乎在 Chrome 或 Firefox 上不起作用，所以我认为这是我在转换或标记结构上做错的事情......如果我弄清楚发生了什么我会更新或如果我找到不同的解决方法

【解决方案2】：

我最近遇到了这个问题，解决方法和你的一样：setTimeout() 包裹jQuery.addClass() 修复了它。当时我最好的猜测是浏览器不认为过渡对于渲染算法是必要的，以节省时间，例如多个 DOM 更改将组合成一个重绘，但是 setTimeout() 给了浏览器一个强制“重置”以单独考虑转换。

我说对了一部分。按照设计，在添加或取消隐藏 DOM 元素后过早的转换将被视为已处于其转换状态。引用MDN:

在之后立即使用过渡时也应小心使用 .appendChild() 将元素添加到 DOM 或删除其显示：无；财产。这看起来好像初始状态有从未发生过，并且该元素始终处于其最终状态。容易的克服这个限制的方法是应用一个 window.setTimeout() 在更改您打算更改的 CSS 属性之前的几毫秒过渡到。

我没有看到您的代码像我的那样添加或取消隐藏任何内容，但我认为浏览器认为您的转换是不必要的，直到setTimeout() 强制它在应用转换类之前计算初始状态。

编辑

在我的例子中，我实际上不得不将页面加载时添加的初始状态（对于幻灯片上滑入的初始动画）延迟 400 毫秒，以便浏览器真正考虑值得尊重的过渡。考虑到这些 CSS3 过渡在脚本中感觉不可靠（大多数示例都没有用户交互），更像是对浏览器的建议，使用 CSS3 关键帧而不是像 this answer explains 这样可能会更好地完全控制过渡发生的时间。

【讨论】：