jQuery CSS3 动画

Question

我的操作按钮有问题。当我点击它时，我想在 CSS3 中播放动画。但是当我点击按钮时没有任何反应。这是我的代码:

HTML:

<section class="row" id="dice_canvas">

    <div class="col-lg-12">
        <div class="wrap">
            <div class="dice" id="number_location2">
                <div class="front">1</div>
                <div class="back">2</div>
                <div class="top">3</div>
                <div class="bottom">4</div>
                <div class="left">5</div>
                <div class="right">6</div>
            </div>
        </div>
    </div>

</section>

<section class="row" id="buttons">

    <div class="col-lg-12 font padding_btn">

        <button class="btn btn-info font" id="btn_roll" onClick="roll()">Rzuć Kostką</button>

    </div>

</section>

---

CSS:

.dice {

    -webkit-transform-style: preserve-3d;

    position:relative;
    margin: 90px auto 90px auto;
    text-align:center;
    width:200px;
    height:200px;
    background:white;

    height:200px;           /* vertical align need this line <-----*/
    line-height: 200px;     /* and this line <-----                */

}

.animacja{
    -webkit-animation: trzesie;
    -webkit-animation-duration: 0.7s;

}

@-webkit-keyframes trzesie /* Safari and Chrome */
{
    /*
    0% {-webkit-transform: rotate(0deg); top:0px;}
    5% {-webkit-transform: rotate(45deg); top:-100px;}
    10% {-webkit-transform: rotate(0deg);}
    15% {-webkit-transform: rotate(-45deg);}

    20% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(45deg);}
    30% {-webkit-transform: rotate(0deg);}
    35% {-webkit-transform: rotate(-45deg);}
    */
    from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }

}


.back {
    background:url('grafika/1.jpg');
    background-size:100% 100%;
    transform: translateZ(-100px) rotateY(180deg);
    -webkit-transform: translateZ(-100px) rotateY(180deg);

}
.right {
    background:url('grafika/2.jpg');
    background-size:100% 100%;
    transform: rotateY(-270deg) translateX(100px);
    transform-origin: top right;
    -webkit-transform: rotateY(-270deg) translateX(100px);
    -webkit-transform-origin: top right;

}
.left {
    background:url('grafika/3.jpg');
    background-size:100% 100%;
    transform: rotateY(270deg) translateX(-100px);
    transform-origin: center left;
    -webkit-transform: rotateY(270deg) translateX(-100px);
    -webkit-transform-origin: center left;

}
.top {
    background-color:gray;
    background-size:100% 100%;
    transform: rotateX(-90deg) translateY(-100px);
    transform-origin: top center;
    -webkit-transform: rotateX(-90deg) translateY(-100px);
    -webkit-transform-origin: top center;

}
.bottom {
    background-color:black;
    transform: rotateX(90deg) translateY(100px);
    transform-origin: bottom center;
    -webkit-transform: rotateX(90deg) translateY(100px);
    -webkit-transform-origin: bottom center;

}
.front {
    background:url('grafika/4.jpg');
    background-size:100% 100%;
    transform: translateZ(100px);
    -webkit-transform: translateZ(100px);
}

---

JQuery:

$("#btn_roll").click(function() {
    $("#number_location2").addClass('animacja');
});

---

感谢您的帮助:)

Answer 1

正如我所看到的，您已将 onClick="roll()" 声明为与您的按钮标记内联，如下所示:

<button class="btn btn-info font" id="btn_roll" onClick="roll()">Rzuć Kostką</button>

有了这个你应该有一些名为 roll() 的函数，它将在点击时执行，同时你有这个代码:

$("#btn_roll").click(function() {
    $("#number_location2").addClass('animacja');
});

当你点击同一个按钮时，它也会被执行!所以 jQuery 无法决定执行哪个函数! roll() 或代码 $("#number_location2").addClass('animacja');，所以从两个中删除一个，如果你想要例如代码$("#number_location2").addClass('animacja'); 要执行，请从您的 html 代码中删除 onClick="roll()