CSSフィルタの切り替え

Question

私のクエリは： 初めてボタンを押すたびに、画像は4秒で目的のフィルタに正常に移行します。しかし、別のボタンを押すと、4秒も経ずに即座に移行が行われます。ボタンを押すたびに4秒間に画像を変更するには？私にとって

function change_image() { 
 
    document.getElementById("blur").style.filter = "sepia(1)"; 
 
} 
 

 
function change_image_2() { 
 
    document.getElementById("blur").style.filter = "grayscale(100%)"; 
 
} 
 

 
function change_image_3() { 
 
    document.getElementById("blur").style.filter = "blur(5px)"; 
 
}

#blur { 
 
    transition-duration: 4s; 
 
}

<div id="blur"> 
 
    <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> 
 
</div> 
 
<br> 
 
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

Answer 1

私はこの質問の前にそれを知らなかったので、それに気づいていただきありがとうございます。

---

が一つのフィルタから他に移行できるようにするには、状態間のあなたのスタイル宣言の内部で同じ<filter_function>リストを持っている必要があります。

そうソリューションは、常にすべてのあなたの<filter_functions>を宣言することです、とだけ0に自分の引数を設定し

...それ以外のブラウザでは、あなたが戻っnoneに来るように強制しても、移行しないだろうと思われます。

function change_image() { 
 
    document.getElementById("blur").style.filter = "sepia(1) grayscale(0%) blur(0px)"; 
 
} 
 

 
function change_image_2() { 
 
    document.getElementById("blur").style.filter = "sepia(0) grayscale(100%) blur(0px)"; 
 
} 
 

 
function change_image_3() { 
 
    document.getElementById("blur").style.filter = "sepia(0) grayscale(0%) blur(5px)"; 
 
}

#blur { 
 
    transition: all 4s; 
 
}

<div id="blur"> 
 
    <img src="http://placehold.it/300" alt="whatever" height="400" width="300"> 
 
</div> 
 
<br> 
 
<button class="btn btn-success" type="button" onclick="change_image()">Sepia</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_2()">Grayscale</button> 
 
<button class="btn btn-success" type="button" onclick="change_image_3()">Blur</button>

---

私はまだ完全に根本的な理由をチェックしませんでしたが、高速読みthisから、私は、ブラウザが同じとの間に正しい数の補間を使用することができるだろうと言うでしょうフィルターを使用していますが、異なるものではありません。

noneから任意のフィルタに最初に移行するにはどうすればよいですか？
もう1つの謎...

Answer 2

、問題はあなたのボタンが未定義の状態にグレースケール（100％）からtransitateことができないということです。あなたは EX、各ボタンの3スタイルパラメータを使用して、あなたのコードを試してみてください：

function change_image() { 
    document.getElementById("blur").style.filter = "sepia(1)"; 
    document.getElementById("blur").style.filter = "grayscale(0%)"; 
    document.getElementById("blur").style.filter = "blur(0px)"; 
} 

私は助けたいと思います。