时间戳

首页 > 解决方案 > 平滑变化的背景

javascript - 平滑变化的背景

问题描述

在我的原始项目中，我具有与 reNewIt() 相同的功能，但仅在开始时使用了 fadeIn()，并且在加载文档后调用它，fadeIn 效果（从不透明度 0 到 1）工作得很好。

当我尝试制作一个按钮来更改背景时（首先使不透明度为 0，然后更改图像，然后使不透明度为 1），我在开发工具中看到不透明度从 1 跳到 0.98，但它不起作用。尝试了不同的解决方案，但我认为setInterval有一些我无法理解的东西。 思路是先去全白，然后改img，隐藏图片的加载时间。

我整天都在阅读帖子和搜索谷歌，无法让它工作。我可以简单地获得一些其他代码来实现这种效果，但我真的很想自己制作。（当我想学习时，复制有什么意义）如果有人能帮我弄清楚，我会很高兴。

let images = {
img1: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
img2: 'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
img3: 'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}




function reNewIt() {
  let opacity = 1;
  let elem = document.getElementById('bgimage');
  let num = Math.ceil(Math.random() * 4);

  fadeOut();
  elem.style.backgroundImage = `url(${images['img'+ num ]})`;
  fadeIn();


  function fadeIn() {
    let id = 0;
    id = setInterval(frameIn, 20);
    function frameIn() {
      opacity += 0.02;
      elem.style.opacity = opacity;
    }
  }

  function fadeOut() {
    let id = 0;
    id = setInterval(frameOut, 20);
    function frameOut() {
      opacity -= 0.02;
      elem.style.opacity = opacity;
    }
  }
}
#bgimage {
    opacity: 1;
    height: 200px;
    width: 1000px;
  border: 1px solid red;
  color:red;
}
<html>
<head>
</head>
<body>
<div id="bgimage">
  <button onclick="reNewIt()">Click me</button>
</div>
</body>
</html>

标签： javascripthtmlcss

解决方案

您可以将过渡添加到您的 CSS

let images = {
img1: 'https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg',
img2: 'https://images.unsplash.com/photo-1494548162494-384bba4ab999?ixid=MXwxMjA3fDB8MHxzZWFyY2h8MXx8ZGF3bnxlbnwwfHwwfA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80',
img3: 'https://images.ctfassets.net/hrltx12pl8hq/4plHDVeTkWuFMihxQnzBSb/aea2f06d675c3d710d095306e377382f/shutterstock_554314555_copy.jpg',
img4: 'https://cdn.pixabay.com/photo/2014/02/27/16/10/tree-276014__340.jpg'
}




function reNewIt() {
  let opacity = 1;
  let elem = document.getElementById('bgimage');
  let num = Math.ceil(Math.random() * 4);

  fadeOut();
  elem.style.backgroundImage = `url(${images['img'+ num ]})`;
  fadeIn();


  function fadeIn() {
    let id = 0;
    id = setInterval(frameIn, 20);
    function frameIn() {
      opacity += 0.02;
      elem.style.opacity = opacity;
    }
  }

  function fadeOut() {
    let id = 0;
    id = setInterval(frameOut, 20);
    function frameOut() {
      opacity -= 0.02;
      elem.style.opacity = opacity;
    }
  }
}
#bgimage {
    opacity: 1;
    height: 200px;
    width: 1000px;
  border: 1px solid red;
  color:red;
   transition: 2s ease-out;
}
<html>
<head>
</head>
<body>
<div id="bgimage">
  <button onclick="reNewIt()">Click me</button>
</div>
</body>
</html>

推荐阅读