純粋なJavaScriptでFadeOut/FadeInを実装する

Question

私の問題は、fadeOutだけが動作し、fadeInは動作しないということです。私はCSSやjQueryを使っていません。そして、私のコードをより効果的にするにはどうすればいいですか？

コード：

HTML：

<div class="circle"id="circle1"onclick="myFunction()"></div> 
<div class="circle"id="circle2" style="visibility:visible" ></div 

はJavaScript：

function myFunction() { 
    var element = document.getElementById("circle2"); 
    if (element.style.visibility === "visible") { 
    var op = 1; 
    var timer = setInterval(frame, 100) 

    function frame() { 
     if (op <= 0.1) { 
     clearInterval(timer); 
     element.style.visibility = "hidden"; 
     } 
     element.style.opacity = op; 
     op -= op * 0.1; 
    } 
    } else { 
    var op = 0; 
    var timer = setInterval(frame, 10) 

    function frame() { 
     if (op >= 0.95) { 
     clearInterval(timer); 
     element.style.visibility = "visible"; 
     } 
     element.style.opacity = op; 
     op += op * 0.1; 
    } 
    } 
} 

Answer 1

これが機能していないいくつかの理由があります。

1. 0 *何もまだ0なのでvar op = 0; op + = op * 0.1は常にゼロになります。

2. 完全に見えるように遷移中は非表示に設定されています。

私はそれを動作させるためにそれで遊んが、私はそれをやっている間、私は自分のスタイルに合うようにあなたのコードをリファクタリング。これは私が思いついたものです。

function myFunction() { 
 

 
    var element = document.getElementById("circle2"); 
 
    var op; 
 
    var timer; 
 

 
    if (element.style.visibility === "visible") { 
 
     op = 1; 
 
     timer = setInterval(fadeOut, 100) 
 
    } else { 
 
     op = 0.1; 
 
     timer = setInterval(fadeIn, 100) 
 
    } 
 

 
    function fadeOut() { 
 
     if (op <= 0.1) { 
 
      clearInterval(timer); 
 
      element.style.visibility = "hidden"; 
 
     } 
 
     element.style.opacity = op; 
 
     op -= op * 0.1; 
 
    } 
 

 
    function fadeIn() { 
 
     element.style.visibility = "visible"; 
 
     if (op >= 0.95) { 
 
      clearInterval(timer); 
 
     } 
 
     element.style.opacity = op; 
 
     op += op * 0.1; 
 
    } 
 
}

<div class="circle"id="circle1"onclick="myFunction()">hello</div> 
 
<div class="circle"id="circle2" style="visibility:visible" >Test</div>