Javascript toggleClass()用于调整纸张波纹后的圆圈大小
我试图用纸波纹动画制作一个圆圈,当点击时,它会过渡到一个更大的圆圈。这存在于一个非常宽的区域上,可以通过按钮而不是滚动条滚动 HTML: CSS: 您需要在核心transitionend的处理程序中以$this为目标Javascript toggleClass()用于调整纸张波纹后的圆圈大小,javascript,jquery,html,css-transitions,polymer,Javascript,Jquery,Html,Css Transitions,Polymer,我试图用纸波纹动画制作一个圆圈,当点击时,它会过渡到一个更大的圆圈。这存在于一个非常宽的区域上,可以通过按钮而不是滚动条滚动 HTML: CSS: 您需要在核心transitionend的处理程序中以$this为目标 $this.toggleClassBiger;谢谢我觉得自己太傻了。穆罕默德回答了同样的问题,不过还是谢谢你! <link rel="import" href="https://www.polymer-project.org/0.5/components/paper-
$this.toggleClassBiger;谢谢我觉得自己太傻了。穆罕默德回答了同样的问题,不过还是谢谢你!
<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>❯</span>
<paper-ripple class=" circle recenteringTouch " fit></paper-ripple>
</button>
</td>
</tr>
</table>
var disk = $('.disk');
disk.on("core-transitionend", function () {
toggleClass("bigger");
});
.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;
}
disk.on("core-transitionend", function () {
$(this).toggleClass("bigger");
});