CSS 过渡错误

Question

我构建了一个滑块，将其状态存储在浏览器的 sessionStorage 中，并利用背景图像上的 -webkit-image-set 根据像素密度在不同分辨率图像之间切换。我对其进行了测试并确保它可以正常工作并优雅地降级回 IE 9，但是当我在我的客户站点中实现它时，突然间动画渐变不再起作用。某处肯定有一些冲突的 CSS，但我似乎找不到它。

这里实现了一个工作版本：

http://codepen.io/webconsult/pen/CEtIK?editors=110

我在实现它时遇到问题的网站在这里：

http://concept.rille.dk

我应用以下规则向元素添加过渡

.bg-slider > * {
  [...]
  -webkit-transition: all 3s;
  transition: all 3s;
  [...]
}

请注意，出于调试目的，我将“全部”用于转换属性。在codepen中，我可以看到它如何影响元素的高度，从而导致每当我使浏览器视口变高时调整背景大小的动画延迟（我正在使用js强制元素达到浏览器的高度），但是在实时站点上，这不会发生，这表明过渡属性以某种方式没有被强制执行。但是当我也检查开发工具时，看看它是否被覆盖。

Answer 1

你使用的是“active”和“hidden”，可能是hidden与Bootstrap的同名类不兼容。您可以通过删除 Bootstrap 并享受您最出色的 bg 滑块运行良好来测试这一点。

解决方案：

http://jsbin.com/danezu/1/edit

将类从 .hidden 和 .active 更改为其他内容，这样就可以了。