Question

我有一个标题，我在设置滚动量后修复了页面顶部，并且想要在标题修复后对标题内的多个元素执行一组CSS过渡：

标题高度从100px缩小到60px
标题图标从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＆amp;＃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()就行不通。如果有人有想法，请告诉我！

Answer 2

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

我部分正确。根据设计，添加或取消隐藏DOM元素后过早的转换将被视为已处于转换状态。引用MDN：

在使用后立即过渡时也要小心使用.appendChild（）将元素添加到DOM或删除它 display：none;属性。这被视为初始状态从未发生过，元素始终处于最终状态。很容易克服这个限制的方法是应用一个window.setTimeout（）在更改您想要的CSS属性之前的几毫秒过渡到。

我没有看到你的代码附加或取消隐藏任何东西，就像我的那样，但我认为浏览器相信你的转换是不必要的，直到setTimeout()迫使它在应用转换类之前计算初始状态。

修改

在我的情况下，我实际上不得不延迟在页面加载时添加的初始状态（对于幻灯片放映的部分的初始动画）400毫秒，浏览器实际上认为转换值得尊重。考虑到这些CSS3转换感觉脚本不可靠（大多数示例都没有用户交互），更像是对浏览器的建议，使用CSS3关键帧而不是this answer explains可能更好地完全控制转换的时间发生。

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

2 个答案: