沒有jQuery的動畫JavaScript？

所以我寫了一個非常簡單的HTML/JS腳本在OBS（開放轉播軟件）使用：沒有jQuery的動畫JavaScript？

setTimeout(function() { 
    $("#file1").show('slide', {direction: 'left'}, 1500); 
    $("#file2").show('slide', {direction: 'right'}, 1500); 
    setTimeout(function() { 
     $('#vs').fadeIn({queue: false, duration: 500}); 
     $('#vs').animate({ width: "300", top: "160", left: "490" }, 500); 
    }, 1500); 
}, 1000);

這樣做的問題是，jQuery和jQuery的UI我巨大的庫。在OBS中加載半個庫會導致一些嚴重的性能問題。正如你所看到的，我正在做一些非常簡單的事情。我想知道是否有人可以幫助我在不使用任何外部庫的情況下運行此函數。我需要它運行儘可能平滑，因爲我以60fps播放。

來源

2014-10-12 Jason Axelrod

你爲什麼不使用CDN？ jjquery和jquery ui在他們的主頁上提供它們。另外谷歌託管這些庫 – Freddy 2014-10-12 07:28:30

使用Css動畫 – 2014-10-12 07:29:19

我不認爲你需要這個反正jQuery UI。 – Scimonster 2014-10-12 07:29:31

純CSS替代（流體，快速和容易的）：

*{box-sizing:border-box;padding:0; margin:0;} 
 

 
:root,body{ 
 
    position:relative; 
 
    width:100vw; 
 
    height:100vh; 
 
    overflow:hidden; 
 
    background: ghostwhite; 
 
} 
 

 
main,figure{ 
 
    width:100%; 
 
    height:100%; 
 
    overflow:hidden 
 
} 
 
main{ 
 
    position:absolute; 
 
    left:0; 
 
    top:0 
 
} 
 
figure{ 
 
    position:relative 
 
} 
 
figure img:nth-child(1){ 
 
    animation: introLeft .6s ease 
 
} 
 
figure img:nth-child(2){ 
 
    transform:scaleX(-1); 
 
    animation: introRight .6s ease 
 
} 
 
figure img:nth-child(3){ 
 
    width:200px; 
 
    position:absolute; 
 
    left:50%; 
 
    top:50%; 
 
    margin:-100px 0 0 -100px; 
 
    animation: introScale .9s ease 
 
} 
 
figure img:not(:nth-child(3)){ 
 
    width:48% 
 
} 
 

 
@keyframes introLeft { 
 
    from{transform:translate3d(-100%,0,0)} 
 
    to{transform:translate3d(0,0,0)} 
 
} 
 

 
@keyframes introRight { 
 
    from{transform:translate3d(100%,0,0) scaleX(-1)} 
 
    to{transform:translate3d(0,0,0) scaleX(-1)} 
 
} 
 
@keyframes introScale { 
 
    0%{transform:scale(4);opacity:0} 
 
    80%{transform:scale(4);opacity:0} 
 
    100%{transform:scale(1);opacity:1} 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 
<main> 
 
    <figure> 
 
     <img src=http://i.imgur.com/9iHCndo.png /> 
 
     <img src=http://i.imgur.com/ARZv1dy.png /> 
 
     <img src=http://i.imgur.com/Q2jTGlE.png /> 
 
    </figure> 
 
</main>

來源

2014-10-12 08:44:05

太棒了！謝謝。 – 2014-10-12 14:30:07

沒有jQuery的動畫JavaScript？

回答

相關問題