toggleClass（）用於在紙紋波後調整大小的圓圈

Question

我正在試圖製作一個圓形的紙紋波動畫，當它被點擊時，轉換到一個更大的圓圈。這存在於非常寬的<div>中，可以通過按鈕滾動瀏覽，而不是滾動條。

HTML：

<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-ripple/paper-ripple.html"> 
<div class="main"> 
    <div id="hero"> 
     <div class="slide"> 
      <div id="background"></div> 
      <table> 
       <tr> 
        <td> 
         <div class="disk"> 
          <paper-ripple class="circle recenteringTouch" fit></paper-ripple> 
         </div> 
        </td> 
        <td> 
         <button class="scrollButton"> 
             <span>&#10095;</span> 
             <paper-ripple class=" circle recenteringTouch " fit></paper-ripple> 
            </button> 
           </td> 
          </tr> 
         </table> 

我不知道，如果使用<table>是正確的;我只是認爲這會幫助組織。

JS：

var disk = $('.disk'); 
disk.on("core-transitionend", function() { 
    toggleClass("bigger"); 
}); 

CSS：

.disk { 
-webkit-transition: width, height, 2s; 
    -moz-transition: width, height, 2s; 
    -o-transition: width, height, 2s; 
    transition: width, height, 2s; 
} 

.bigger { 
width:500px; 
height:500px; 
} 

JSFiddle

Answer 1

你需要的目標$(this)在處理程序core-transitionend

disk.on("core-transitionend", function() { 
    $(this).toggleClass("bigger"); 
}); 

JSFiddle Link