主页 / 问题 / 903897
Accepted
Malyuga
Asked:2020-11-08 19:22:42 +0000 UTC2020-11-08 19:22:42 +0000 UTC

在纯 JS 中显示无和块之间的转换

  • 772

我需要实现从 NONE 到 BLOCK 的平稳过渡。研究例子，我就是不知道怎么用纯 JS 做，到处都有 jquery 的例子。

CSS：

.slide {
   display: none;
   position: absolute;
   opacity: 0;
   list-style: none;
}

.show {
   display: block;
   position: relative;
   opacity: 1;
}

js：

var slide = document.getElementById('slider');
var slides = slide.getElementsByTagName('div');
var currentSlide = 0;


function leftBtn() {
    slides[currentSlide].className = 'slide';
    currentSlide = (++currentSlide)%slides.length;
    slides[currentSlide].className = 'slide show';
}

function rightBtn() {
    slides[currentSlide].className = 'slide';
    currentSlide = (--currentSlide + slides.length) % slides.length;
    slides[currentSlide].className = 'slide show';
}
javascript

1 个回答

  1. Best Answer

    答案来自 https://stackoverflow.com/questions/8449933/animation-css3-display-opacity

    .slide-wrapper {
  padding: 10px;
  border: 1px solid black;
}

.slide-wrapper .slide {
  display: none;
}

.slide-wrapper:hover .slide {
  display: block;
  animation: fadeInFromNone 1s ease-out;
}

@keyframes fadeInFromNone {
  0% {
    display: none;
    opacity: 0;
  }
  1% {
    display: block;
    opacity: 0;
  }
  100% {
    display: block;
    opacity: 1;
  }
}
    <div class="slide-wrapper">
  <div class="slide">
    1
  </div>
</div>
<div class="slide-wrapper">
  <div class="slide">
    2
  </div>
</div>
<div class="slide-wrapper">
  <div class="slide">
    3
  </div>
</div>

    • 1

相关问题