多个 HTML 元素的 CSS 转换不触发

Question

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

1. 标题高度从 100px 缩小到 60px
2. 标题图标从 50x50 缩小到 25x25
3. 标题字体从 48px 缩小到 36px

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

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

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

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

对于 header 本身 (#1)，我使用以下选择器来修复 header 并更改高度:

#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/

Answer 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()，您的示例将无法运行。如果有人有想法，请告诉我!