toggleClass() 用于在 Paper Ripple 之后调整圆的大小

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

您需要在 core-transitionend

的处理程序中定位 $(this)

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

JSFiddle Link

toggleClass() 用于在 Paper Ripple 之后调整圆的大小

toggleClass() for resizing circle after Paper Ripple

html

javascript

jquery

css-transitions

polymer