Question

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

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

Answer 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进行样式和定位。

Answer 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;
}

5秒后淡出1分，淡入淡出1分

2 个答案: