Question

我写了一个关键帧动画：

@-webkit-keyframes cubemove {
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
100% {-webkit-animation-play-state:paused;}
}

.cubebox {
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
}

我想在我使用以下html和查询代码编写的矩形上运行此动画：

<figure id="box">
<img src="/images/cube/step1.jpg"/>
<img src="/images/cube/step2.jpg"/>
<img src="/images/cube/step3.jpg"/>
<img src="/images/cube/step4.jpg"/>
<img src="/images/cube/step5.jpg"/>
<img src="/images/cube/step6.jpg"/>
</figure>

<button class="commencer">Start</button>

<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
    $('.commencer').click(function(){
        $('#box').addClass('cubemove');
    });

    $('.commencer').click(function(){
        $(this).removeClass('cubemove');
    });
});

</script>

当我点击按钮时，没有任何事情发生。我对jquery不是很好，所以可能是问题。

非常感谢你的帮助！

马特

Answer 1

您正在添加点击事件，以便将类添加到同一按钮并将其删除。最终结果是元素将处于与其开始时相同的状态。尝试使用单独的按钮来开始。

Answer 2

我发现了问题。这是一个查询冲突问题。我使用了以下代码，但它确实有效。

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".commencer").click(function(){
        jQuery("#box").addClass("cubebox");
    });
});

</script>

Answer 3

我建议你也试试这个jquery插件，它可以动态地将css3动画添加到元素和一堆额外的东西：https://github.com/krazyjakee/jQuery-Keyframes

使用jquery触发css3关键帧

3 个答案: