5秒后淡出1个div并淡入另一个[关闭]答案

【问题标题】：Fade Out 1 Div After 5 Secs and Fade in Another [closed]5秒后淡出1个div并淡入另一个[关闭]
【发布时间】：2014-12-21 13:34:13
【问题描述】：

我正在尝试淡出 #one，然后在 5 秒后淡入 #two。我试图使文件尽可能小，因此我不想使用像 jquery 这样重的库，因为它只会显示在移动设备上。

<div id="one">div one</div>
<div id="two">div two</div>

【问题讨论】：

那么问题是什么？使用哪个动画库？我会使用 TweenLite greensock.com
@Joe 如果您不想使用 jquery，那么至少您是否尝试过查看他们的源代码是如何实现的？你可以拿起那段代码
您使用的是现代浏览器吗？ css 转换是一种选择吗？
@LearningNeverStops 我不知道如何挑选出特定的代码
Javascript fade in fade out without Jquery and CSS3的可能重复

标签： javascript html zepto

【解决方案1】：

您可以使用 GSAP 库，它的性能优于 jQuery，即使在大多数手机上也是如此。

包括 GSAP

//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.1/TimelineLite.min.js

HTML

<div id="one">div one</div>
<div id="two">div two</div>

Javascript

window.onload = function(){
var greenbox = document.getElementById("one");
var bluebox = document.getElementById("two");
var tl = new TimelineLite();
    /* Fading in and out */
    tl.to(one, 2, {autoAlpha:0, ease:Power1.easeInOut})
    tl.to(two, 2, {autoAlpha:1, ease:Power1.easeInOut}, "-=0.5");
}

这是一个小提琴http://jsfiddle.net/qkds4c2d/ - 您可以使用 CSS 进行样式和定位。

【讨论】：

【解决方案2】：

HTML：

<div id="one" class="animated">div one</div>
<div id="two" class="animated hidden">div two</div>

JavaScript：

document.getElementById("one").className = "animated fadeOut";
document.getElementById("two").className = "animated fadeIn";

CSS：

.hidden {
  display: none;
}

// https://github.com/daneden/animate.css/blob/master/source/_base.css

.animated {
  animation-duration: 5s; // 1s from source
  animation-fill-mode: both;
}

// https://github.com/daneden/animate.css/blob/master/source/fading_entrances/fadeIn.css

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

.fadeIn {
  animation-name: fadeIn;
}

// https://github.com/daneden/animate.css/blob/master/source/fading_exits/fadeOut.css

@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

.fadeOut {
  animation-name: fadeOut;
}

【讨论】：