我正在尝试制作一个页面，当您单击一个按钮时它会更改背景图像。码笔:http://codepen.io/meek/pen/EPLZpW
body {
background: url('https://s3.eu-central-1.amazonaws.com/meek-img/1.jpg') no-repeat center center fixed;
background-size: cover;
-webkit-transition: background .5s ease-in-out;
-moz-transition: background .5s ease-in-out;
-o-transition: background .5s ease-in-out;
transition: background .5s ease-in-out;
}
我目前这样做的两个大问题是:
- 它在 Mozilla Firefox 中完全不起作用。
- 动画一点也不流畅。它瞬间切换到空白背景，然后动画开始运行。有没有办法防止这种情况，或者由于加载时间而不可避免？如果是这样，是否有其他方法可以实现此功能来规避此问题？起初，我想用 jQuery 制作动画，但被告知这不是最佳选择。
最佳答案
在整个属性 background 上进行转换可能会产生一些奇怪的效果。特别是涉及图像时。直接在背景图像上进行这些转换对您的浏览器要求很高。而且，正如您所提到的，在不同的浏览器中表现不一致。
更好的想法是在具有该背景属性的元素(如 div)的 opacity 上执行过渡或动画。这样，浏览器就不必担心转换图像，只需担心转换 div，这将使您的浏览器完成更容易的任务。如果您想更改页面的背景，只需添加一个带有该背景图片的 div。
我根据您的代码包含了一个片段来演示总体思路。您还会注意到，我仅在请求图像作为背景图像时预加载图像。这样，用户只会下载他看到的图像。我的演示使用 jQuery，但可以使用 vanilla JS 轻松集成。
function preload_img (src, callback) {
var img = new Image();
img.onload = function() {
if( callback && typeof callback === 'function' ) {
callback( img );
}
};
img.src = src;
}
var imgs = [
"https://s3.eu-central-1.amazonaws.com/meek-img/1.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/2.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/3.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/4.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/5.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/6.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/7.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/8.jpg",
"https://s3.eu-central-1.amazonaws.com/meek-img/9.jpg"
];
function change_bg() {
var random_index = Math.floor(Math.random() * imgs.length);
preload_img( imgs[random_index], function( img ) {
$('<div>')
.addClass('bg-image')
.css('background-image', 'url(' + img.src + ')')
.appendTo('body')
;
} );
}
$( 'button' ).click( function() {
change_bg();
} );
change_bg();@keyframes fadein
{
from { opacity: 0; }
to { opacity: 1; }
}
.bg-image
{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
animation: fadein 1s;
background-size: cover;
}
.mimi
{
z-index: 1;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="mimi">
<button class="btn btn-default btn-lg">click me</button>
</div>
</body>关于javascript - 如何使我的 CSS 过渡更顺畅/在不同的浏览器上工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35051648/