通知ボタンのUIインタラクション

Question

ドリブルからUIインタラクションを模倣しようとしていますが、送信オプションを選択した後に何らかの理由でアニメーションが乱雑です。

私の意味を理解するために私のペンを見てください。 ありがとうございました！

http://codepen.io/sofiyashakeel/pen/PWdxdb

これは私のコードは、上のクリック送信ボタン用に次のようになります。

$(function() { 
    $("#send").click(function() { 
    setTimeout(function() { 
     $("button").removeClass("onclic"); 

     $(".info").addClass("hidden"); 

     $("button").addClass("validate", callback); 
    }, 1050); 
    }); 
}); 

Answer 1

は、あなたの問題はあなたがbutton代わりの効果を適用するほとんどの場所で.buttonクラスを使用したことだったようです.buttonクラスのボタンだけでなく、ページ上のすべてのボタンに適用できます。 CSSで

は、私はそれを固定しているようだ .buttonする buttonへのすべての参照に変更 button{...} .button{}にし、あなたのJSコードに変更します。

次のサンプルコードは次のようになります。

$(function() { 
    $("#send").click(function() { 
    setTimeout(function() { 
     //$("button").removeClass("onclic"); 
     $(".button").removeClass("onclic"); 

     $(".info").addClass("hidden"); 

     //$("button").addClass("validate", callback); 
     $(".button").addClass("validate", callback); 
    }, 1050); 
    }); 
}); 

はSCSSはそう下記のCodePenを更新スニペットで働いて得ることができませんでした。

Updated CodePen