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;
  [...]
}

请注意，我使用'all'作为transition-property进行调试。在codepen中，我可以看到它是如何影响元素的高度，每当我使浏览器视口更高时（我使用js强制元素到浏览器的高度），调整背景大小时会产生动画延迟，但在现场网站上，这不会发生，指向转换属性不知何故未被强制执行。但是，当我检查开发工具时，看看它是否被覆盖它不是。

Answer 1

您正在使用＆＃34;有效＆＃34;和＆＃34;隐藏＆＃34;，它可能是hidden与Bootstrap的同名类不兼容。您可以通过删除Bootstrap来测试这一点，并享受您最优秀的bg滑块工作正常。

<强>解决方案：

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

将课程从.hidden和.active更改为其他内容并且有效。