文章/答案/技术大牛

发布

问如何在1 div上应用2动画
EN

Stack Overflow用户

提问于 2014-11-26 10:30:45

回答 1查看 149关注 0票数 0

$(document).ready(function(){
$("#page").click( function(){
$("#page").addClass('magictime perspectiveLeft');
$("#page").addClass('magictime perspectiveLeftRetourn');

我想做的是：

单击元素(“#page”)后，该代码应该可以工作： $("#page").addClass('magictime perspectiveLeft');，所以页面元素应该左转(perspectiveLeft)。
在完成此动画之后，当我单击相同的元素(“#page”)时，该代码应该可以工作： $("#page").addClass('magictime perspectiveLeftRetourn');，所以页面元素应该回到原来的位置(perspectiveLeftRetourn)。

动画应该就像贺卡的打开和关闭一样。

我该怎么做？改进动画的建议是值得赞赏的。

我用https://github.com/miniMAC/magic/制作动画

jquery

css

animation

magic-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-28 10:59:13

检查这个小提琴

我使用的代码是

jQuery(document).ready(function($){
    var anim = false;
    $page = $("#page");
    $page.click( function(){
        if(!anim){
            anim = true;
            if($page.hasClass('perspectiveLeft'))
                $page.removeClass('perspectiveLeft').addClass('magictime perspectiveLeftRetourn');
            else
                $page.removeClass('perspectiveLeftRetourn').addClass('magictime perspectiveLeft');
        }
    })
    $page.on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        anim = false;
    });
});

票数 -1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/27146761

复制

相似问题

问如何在1 div上应用2动画
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在1 div上应用2动画EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在1 div上应用2动画
EN