Question

我正在尝试制作一个单击按钮时更改背景图像的页面。代码笔：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制作动画，但被告知这不是最佳的。

Answer 1

对完整属性background进行转换可能会产生一些不稳定的影响。特别是涉及图像时。直接在背景图像上进行这些转换对您的浏览器来说非常苛刻。而且，正如您所提到的，在不同的浏览器中表现不一致。

更好的想法是在具有该背景属性的元素（如div）的opacity上进行转换或动画。通过这种方式，浏览器不必担心转换图像，只需转换div，这将为您的浏览器带来更轻松的任务。如果您想要更改页面的背景，则只需添加带有该背景图像的div。

我已经根据您的代码添加了一个片段，以演示一般的想法。您还会注意到，我只在请求图像作为背景图像时预加载图像。这样，用户只下载他看到的图像。我的演示使用jQuery，但可以使用vanilla JS轻松集成。

＆＃13;

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();

＆＃13;

@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;
}

＆＃13;

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

＆＃13;

Answer 2

我考虑在0不透明度的情况下将新图像加载到当前图像的顶部，然后将不透明度转换为1.之后，您可以删除下面的图像。

在开始转换之前，请确保图像已完全加载。

可以使用append（）添加新图像，然后在加载新图像时，可以使用不透明度1为其添加一个类。

如何使我的CSS过渡更顺畅/在不同的浏览器上工作？

2 个答案: