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

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>

Answer 2

这就是我要做的： https://codepen.io/antoniandre/pen/QzKKEG

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

  function showNextQuote() {
      ++quoteIndex;
      var quote = quotes.eq(quoteIndex % quotes.length);

      quote.addClass('active')
      setTimeout(function() {
        quote.removeClass('active');
        showNextQuote();
      }, 4000);
  }

  showNextQuote();
});

CSS

.rotate-text {
    position: relative;
}
.rotate-text li {
    position: absolute;
  opacity: 0;
  transition: 0.5s;
  transform: translateY(-1.5em);
}
.rotate-text li.active {
    opacity: 1;
  transform: translateY(0em);
}

我相信让CSS做样式是个更好的主意。仅使用jQuery触发类。

Answer 3

.rotate-text {
    position: relative;
}

.rotate-text li {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
            transform: translateY(40px);
    -webkit-transition: opacity 0.4s, visibility .4s, -webkit-transform .4s ease-in-out;
            transition: opacity 0.4s, visibility .4s, -webkit-transform .4s ease-in-out;
         -o-transition: opacity 0.4s, visibility .4s, transform .4s ease-in-out;
            transition: opacity 0.4s, visibility .4s, transform .4s ease-in-out;
            transition: opacity 0.4s, visibility .4s, transform .4s ease-in-out, -webkit-transform .4s ease-in-out;
}

.rotate-text li.active {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);

}