ボタン/リンクをクリックすると、特定のハイライトアニメーションを追加するにはどうすればよいですか？

Question

ボタン/リンクをクリックしたときに、新しい背景色をフェード/ストレッチ（強調表示）して強調表示したいと思います。

例として、Chromeの履歴にアクセスして[Chromeの履歴]、[他の端末のタブ]または[閲覧のデータを消去]のリンクをクリックすると、この効果が表示されます。

どうすればいいですか？

ありがとうございます。

Answer 1

実際にGoogleではペーパーリップルを使用しているため、他の紙要素が接触点から発する波紋効果をシミュレートするために使用できます。このエフェクトは、動きのある同心円として視覚化できます。

ペーパーリップルは「マウス」と「マウスアップ」イベントを聴き、それに触れると波紋効果を表示します。また、デフォルトの動作を無効にして、手動でダウン動作とアップ動作をリップル要素にルーティングすることもできます。 downAction（）を呼び出すと、紙リップルがアニメーションループを終了するようにupAction（）を必ず呼び出してください。

リップルの親コンテナは相対位置にすることが重要です。そうでない場合は、リップルが目的のコンテナの外に出てきます。

REFERENCE

//jQuery time 
 
    var parent, ink, d, x, y; 
 
    $("ul li a").click(function(e){ 
 
    \t parent = $(this).parent(); 
 
    \t //create .ink element if it doesn't exist 
 
    \t if(parent.find(".ink").length == 0) 
 
    \t \t parent.prepend("<span class='ink'></span>"); 
 
    \t \t 
 
    \t ink = parent.find(".ink"); 
 
    \t //incase of quick double clicks stop the previous animation 
 
    \t ink.removeClass("animate"); 
 
    \t 
 
    \t //set size of .ink 
 
    \t if(!ink.height() && !ink.width()) 
 
    \t { 
 
    \t \t //use parent's width or height whichever is larger for the diameter to make a circle which can cover the entire element. 
 
    \t \t d = Math.max(parent.outerWidth(), parent.outerHeight()); 
 
    \t \t ink.css({height: d, width: d}); 
 
    \t } 
 
    \t 
 
    \t //get click coordinates 
 
    \t //logic = click coordinates relative to page - parent's position relative to page - half of self height/width to make it controllable from the center; 
 
    \t x = e.pageX - parent.offset().left - ink.width()/2; 
 
    \t y = e.pageY - parent.offset().top - ink.height()/2; 
 
    \t 
 
    \t //set the position and add class .animate 
 
    \t ink.css({top: y+'px', left: x+'px'}).addClass("animate"); 
 
    })

/*custom fonts - Bitter, Montserrat*/ 
 
    @import url('http://fonts.googleapis.com/css?family=Montserrat|Bitter'); 
 
    /*basic reset*/ 
 
    * {margin: 0; padding: 0;} 
 
    body { 
 
    \t background-color:black; 
 
    \t background-size: cover; 
 
    } 
 
    
 
    h1 { 
 
    \t font: normal 32px/32px Bitter; color: white; 
 
    \t text-align: center; padding: 85px 100px; 
 
    } 
 
    
 
    /*nav styles*/ 
 
    ul { 
 
    \t background: white; border-top: 6px solid hsl(180, 40%, 60%); 
 
    \t width: 200px; margin: 0 auto; 
 
    } 
 
    ul li { 
 
    \t list-style-type: none; 
 
    \t /*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/ 
 
    \t position: relative; 
 
    \t overflow: hidden; 
 
    } 
 
    ul li a { 
 
    \t font: normal 14px/28px Montserrat; color: hsl(180, 40%, 40%); 
 
    \t display: block; padding: 10px 15px; 
 
    \t text-decoration: none; 
 
    \t cursor: pointer; /*since the links are dummy without href values*/ 
 
    \t /*prevent text selection*/ 
 
    \t user-select: none; 
 
    \t /*static positioned elements appear behind absolutely positioned siblings(.ink in this case) hence we will make the links relatively positioned to bring them above .ink*/ 
 
    \t position: relative; 
 
    } 
 
    
 
    /*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/ 
 
    .ink { 
 
    \t display: block; position: absolute; 
 
    \t background: hsl(180, 40%, 80%); 
 
    \t border-radius: 100%; 
 
    \t transform: scale(0); 
 
    } 
 
    /*animation effect*/ 
 
    .ink.animate {animation: ripple 0.65s linear;} 
 
    @keyframes ripple { 
 
    \t /*scale the element to 250% to safely cover the entire link and fade it out*/ 
 
    \t 100% {opacity: 0; transform: scale(2.5);} 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1>Ripple Click Effect</h1> 
 
    <ul> 
 
    \t <li><a>Dashboard</a></li> 
 
    \t <li><a>My Account</a></li> 
 
    \t <li><a>Direct Messages</a></li> 
 
    \t <li><a>Chat Rooms</a></li> 
 
    \t <li><a>Settings</a></li> 
 
    \t <li><a>Logout</a></li> 
 
    </ul>

WORKING FIDDLE