Javascript：

Question

私は写真のウェブサイトを作っていますが、私は立ち往生しています。私は誰かを救出するために探しています。 私の問題は次のものです：私はCSSからjavascriptに次のコードを翻訳したいと思います。

img#image { 
    margin: 0px; 
    background-repeat: none; 
    background-size: 100% 100%; 
} 

@-webkit-keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

@keyframes fade { 
    from {opacity: .4} 
    to {opacity: 1} 
} 

私が今まで作っhave'd：

function Rotate(randomImage) { 
      document.getElementById('image').src = randomImage; 
      document.getElementById('image').setAttribute("style","height: 100%; width: 100%; position:relative; z-index:-1; -webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;"); 
     } 

は、私は、@ -webkit-キーフレームがフェードと@keyframesが私のjavascriptのコードにフェードインを追加する必要があります。ありがとうございました ！

Answer 1

は、しかし、あなたは以下を使用することができ、JSを使用して、より良い方法があります。

<div id ="myImg" style="width:100px;height:100px;background:blue;"></div> 

<script> 
    function fadeIn(from,to,duration) { 
     var elem = document.getElementById("myImg"); 
     var step = (to-from)/duration; 
     var opacity = from; 
     var id = setInterval(frameFade, 5); 

     function frameFade() { 
      if (opacity >= to) { 
       clearInterval(id); 
      } else { 
       opacity+=step; 
       elem.style.opacity = opacity; 
       elem.innerHtml = opacity; 
      } 
     } 
    } 
    fadeIn(0.4,1.0,500); 
</script> 

plunker example

Answer 2

あなたはjqueryのaddClass()

function Rotate(randomImage){ 
$('img').attr('src',randomImage).addClass('animation_class') 
} 

のスタイルのより多くの数より良い純粋なJavaScriptが classList.add()で使用

function Rotate(randomImage) { 
    document.getElementById('image').src = randomImage; 
    document.getElementById('image').classList.add('animation_class') 

} 

を変更するために、この

document.getElementById('image').animation='fade 1.5s' 
document.getElementById('image').WebkitAnimation='fade 1.5s' 

ようDomアニメーションを使用する必要がある場合 の

のCss

.animation_class { 
    height: 100%; 
    width: 100%; 
    position: relative; 
    z-index: -1; 
    -webkit-animation-name: fade; 
    -webkit-animation-duration: 1.5s; 
    animation-name: fade; 
    animation-duration: 1.5s; 
}