I need to implement a smooth transition, from NONE to BLOCK. Studying examples, I just can’t figure out how to do it on pure JS, everywhere there are examples on 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'; }
  • one
    The transition from display:none to display:block not animated. Smoothness must be achieved by other means. - Stepan Kasyanenko
  • @StepanKasyanenko I know this, but I have no idea how this can be done. I cannot refuse to display at all. - Malyuga
  • In general, you can refuse it. The specific implementation depends on your html markup, as well as on the task. What kind of animation do you want? - Stepan Kasyanenko
  • The topic discussed on css can be implemented on stackoverflow.com/questions/8449933/… - GENESIS
  • @StepanKasyanenko I just need a smooth transition from opacity 0 to 1. - Malyuga

1 answer 1

The answer is taken from 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>