javascript - 如何添加动画效果以淡入/淡出文本？

Question

我的这个很好用。

谁知道如何在每个淡入时添加动画效果？

因此下一个文本会同时从 0 不透明度淡入和淡出。

jQuery(document).ready(function($) {
	var quotes = $(".rotate-text li");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(1000)
            .delay(4000)
            .fadeOut(1000, showNextQuote);
    }

    showNextQuote();
});

.rotate-text li {
	display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rotate-text">
  <li>Some intro text</li>
  <li>Oh look at me</li>
  <li>Here I am again</li>
</ul>

Answer 1

试试这个。

jQuery(document).ready(function($) {
  var quotes = $(".rotate-text li");
  var quoteIndex = -1;

  function showNextQuote() {
    ++quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(1000)
      .delay(4000)
      .fadeOut(1000, showNextQuote);
  }

  showNextQuote();
});

.rotate-text li {
  display: none;
}


/* Animation */

@keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0)
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

@-webkit-keyframes fadeInUp {
  from {
    transform: translate3d(0, 40px, 0)
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1
  }
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both
}

.animatedFadeInUp {
  opacity: 0
}

.fadeInUp {
  opacity: 0;
  animation-name: fadeInUp;
  -webkit-animation-name: fadeInUp;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="rotate-text">
  <li class="animated animatedFadeInUp fadeInUp">Some intro text</li>
  <li class="animated animatedFadeInUp fadeInUp">Oh look at me</li>
  <li class="animated animatedFadeInUp fadeInUp">Here I am again</li>
</ul>