Question

我正在尝试制作一个简单的幻灯片，其中图像淡入和淡出。基于此：https://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/，除非没有jquery。

我的图像消失了。但是随后下一个图像突然出现，而不是淡入。

我将我的代码复制到了https://codepen.io/michaelstack/pen/PvgMLm的codepen中

我注意到有时刷新窗口后淡入行为似乎是正确的。但是后来我刷新它，下一幅图像突然出现而没有褪色。

这是我在Codepen之外的代码副本：

<html>
<head>
  <style>
    #slideshow {
      margin: 50px auto;
      position: relative;
      width: 240px;
      height: 240px;
      padding: 10px;
      box-shadow: 0 0 20px rgba(0,0,0,0.4);
    }

    #slideshow > div {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      bottom: 10px;
    }
    .slide {
      transition: opacity 1s ease;
    }
    .slide > img {
      opacity: inherit;
    }
    .is_hidden {
      opacity: 0;
    }
    .is_shown {
      opacity: 1;
    }
  </style>
</head>
<body>
<script>
  window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

    function hasClass(el, className) {
      return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
    }

    function addClass(el, className) {
      if (el.classList) el.classList.add(className);
      else if (!hasClass(el, className)) el.className += ' ' + className;
    }

    function removeClass(el, className) {
      if (el.classList) el.classList.remove(className);
      else el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
    }

    function toggleClass(el) {
      console.log(el)
      hasClass(el, 'is_hidden') ? removeClass(el, 'is_hidden') : addClass(el, 'is_hidden');
      hasClass(el, 'is_shown') ? removeClass(el, 'is_shown') : addClass(el, 'is_shown');
    }
    var grass = document.querySelector('#grass')
    var dog = document.querySelector('#dog')
    setInterval(function() {
        console.log('toggling')
      toggleClass(grass)
      toggleClass(dog)
    }, 3000)

  });
</script>
<div id="slideshow">
  <div id="dog" class="slide is_shown">
    <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
  <div id="grass" class="slide is_hidden">
    <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
  </div>
</div>
</body>
</html>

对我来说，这段代码总是会产生问题。

Answer 1

问题是

.slide > img {
  opacity: inherit;
}

不继承中间转换值。因此，父容器完成转换后，图像的不透明度将从0直接跳到1。您根本不需要该规则，因为不透明度将一直应用于所有子元素。

window.addEventListener('DOMContentLoaded', (event) => {
  //console.log('DOM fully loaded and parsed');

  function hasClass(el, className) {
    return el.classList ? el.classList.contains(className) : new RegExp('\\b' + className + '\\b').test(el.className);
  }

  function addClass(el, className) {
    if (el.classList) el.classList.add(className);
    else if (!hasClass(el, className)) el.className += ' ' + className;
  }

  function removeClass(el, className) {
    if (el.classList) el.classList.remove(className);
    else el.className = el.className.replace(new RegExp('\\b' + className + '\\b', 'g'), '');
  }

  function toggle(el) {
    hasClass(el, 'is_hidden') ? removeClass(el, 'is_hidden') : addClass(el, 'is_hidden');
  }



  function toggleClass(el) {
    //console.log(el)
    hasClass(el, 'is_hidden') ? removeClass(el, 'is_hidden') : addClass(el, 'is_hidden');
    hasClass(el, 'is_shown') ? removeClass(el, 'is_shown') : addClass(el, 'is_shown');
  }
  var grass = document.querySelector('#grass')
  var dog = document.querySelector('#dog')
  setInterval(function() {
    //console.log('toggling')
    toggleClass(grass)
    toggleClass(dog)
  }, 3000)

});

#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}

#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.slide {
transition: opacity 1s ease;
}
/*.slide > img {
opacity: inherit;
}*/
.is_hidden {
opacity: 0;
}
.is_shown {
opacity: 1;
}

<div id="slideshow">
  <div id="dog" class="slide is_shown">
    <img src="//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
  </div>
 <div id="grass" class="slide is_hidden">
   <img src="//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
 </div>
</div>

为什么这种过渡淡出而不是淡入呢？

1 个答案: