Question

我想通过JavaScript函数使用淡入和淡出动画。我的代码由于某种原因无法正常工作。这是div和JavaScript函数。

最终输出应该像第一个图像淡出，第二个图像淡入。

body {
    background-color: black;
  margin: 0;
  padding: 0;
}

.default{
    cursor: pointer;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10361px / 11);
  height: 210px;
  background: url(https://i.imgur.com/sz8vhOh.jpg);
  animation: open 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.default2{
    cursor: pointer;
    position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(10361px / 11);
  height: 210px;
  background: url(https://i.imgur.com/sz8vhOh.jpg);
  animation: open 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

.back{
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(10361px / 11);
    height: 210px;
    background: url(https://i.imgur.com/sz8vhOh.jpg);
    animation: close 0.5s steps(11);
    animation-fill-mode: forwards;
    animation-play-state: running;
}

@keyframes open
{
    from
    {
        background-position: 0;
    }
    to
    {
        background-position: -10361px;
    }
}


@keyframes close
{
    from
    {
        background-position: -10361px;

    }
    to
    {
        background-position: 0;
    }
}

Answer 1

您可以使用纯Javascript来实现。但是，如果您有CSS过渡，为什么要这么做呢？更偶然的是，内置有许多其他功能（如衰落速度）的JQuery FadeIn和FadeOut方法？

Answer 2

我已经编辑了您的代码，并且可以按照您的要求进行工作。

var delta = .002;
var fadeOut_opacity = 1;
var fadeIn_opacity = 0;

function fading() {

  disappear();
}

function disappear() {
  document.getElementById("div21").style.opacity = fadeOut_opacity;
  document.getElementById("div22").style.opacity = fadeIn_opacity;

  fadeOut_opacity -= delta;
  fadeIn_opacity += delta;

  if (fadeIn_opacity >= 1)
    return;

  timer = setTimeout("disappear()", 1);
}

.special1 {
  opacity: 0.0;
  position: absolute;
  height: 175px;
  margin-right: 25px
}

.visible1 {
  opacity: 1.0;
  position: absolute;
  height: 175px;
  margin-right: 25px;
}

<body onLoad="fading()">

  <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>

</body>

但是像其他人说的那样，使用香草js进行不透明过渡会更加复杂。您可以使用CSS过渡来实现此目的。

function fading() {

  var div21 = document.getElementById('div21');
  var div22 = document.getElementById('div22');

  div21.classList.toggle('special1');
  div21.classList.toggle('visible1');
  div22.classList.toggle('special1');
  div22.classList.toggle('visible1');
}

.visible1,
.special1 {
  position: absolute;
  height: 175px;
  margin-right: 25px;
  transition: opacity ease 3.2s;
}

.visible1 {
  opacity: 1.0;
}

.special1 {
  opacity: 0.0;
}

<body onLoad="fading()">

  <div id="div21" class="visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>

</body>

编辑：对于您的评论@ Afroboy23“ 如果我有两个以上的图像，代码将如何更改？例如10个图像”

let fId;

function fading() {
  fId = setInterval(toggleImg, 2000);
}

function toggleImg() {
  let visible = document.querySelector('.visible1');

  if (!visible.nextElementSibling.classList.contains('special1')) {
    clearInterval(fId);
    return;
  }

  visible.classList.toggle('visible1');
  visible.nextElementSibling.classList.toggle('visible1');
}

.visible1,
.special1 {
  position: absolute;
  height: 175px;
  margin-right: 25px;
  transition: opacity ease 3.2s;
  opacity: 0.0;
}

.visible1 {
  opacity: 1.0;
}

<body onLoad="fading()">

  <div id="div21" class="special1 visible1"> <img src="https://via.placeholder.com/150?text=image%201" alt="img1" /> </div>
  <div id="div22" class="special1"> <img src="https://via.placeholder.com/150?text=image%202" alt="img2" /> </div>
  <div id="div23" class="special1"> <img src="https://via.placeholder.com/150?text=image%203" alt="img3" /> </div>
  <div id="div24" class="special1"> <img src="https://via.placeholder.com/150?text=image%204" alt="img4" /> </div>
  <div id="div25" class="special1"> <img src="https://via.placeholder.com/150?text=image%205" alt="img5" /> </div>
  <div id="div26" class="special1"> <img src="https://via.placeholder.com/150?text=image%206" alt="img6" /> </div>
  <div id="div27" class="special1"> <img src="https://via.placeholder.com/150?text=image%207" alt="img7" /> </div>
  <div id="div28" class="special1"> <img src="https://via.placeholder.com/150?text=image%208" alt="img8" /> </div>
  <div id="div29" class="special1"> <img src="https://via.placeholder.com/150?text=image%209" alt="img9" /> </div>
  <div id="div30" class="special1"> <img src="https://via.placeholder.com/150?text=image%2010" alt="img10" /> </div>

</body>

使用JavaScript和HTML淡入和淡出

2 个答案: