V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
loading
V2EX  ›  JavaScript

点击链接后可以先展现完CSS3动画再跳转到指定的地址吗?

  •  
  •   loading · 2013-05-14 16:47:24 +08:00 · 4533 次点击
    这是一个创建于 4210 天前的主题,其中的信息可能已经有所发展或是发生改变。
    学习 http://blog.sarasoueidan.com/windows8-animations/ 的后,想用这个界面做点东西,看这个页面应该是单页面的应用,我像点击“磁铁块“后,先出一下那个”Some Awesome App!“的褐色页面后再通过”location.href=Url;“进行跳转,由于水平太菜搞不定。。。

    试用了回调函数(我不会这个),没成功,立马就跳转了,插入了sleep(),点击后定住没动画,时间够后直接跳,难道就没法子么?

    function fadeDashBoard(callback){
    for(var i = 1; i <= 3; i++) {
    $('.col'+i).addClass('fadeOutback').removeClass('fadeInForward-'+i);
    }
    callback()
    }


    $(".photos-thumb").click(function(){

    fadeDashBoard(goto('/DayPlan'));

    });

    function goto(gotoUrl){
    location.href=gotoUrl;
    }
    4 条回复    1970-01-01 08:00:00 +08:00
    wctbok
        1
    wctbok  
       2013-05-14 16:56:53 +08:00   ❤️ 1
    可以,调用这个事件 animationend,具体问 google 。
    xavierskip
        2
    xavierskip  
       2013-05-14 16:59:59 +08:00   ❤️ 1
    js 不是有个 setTimeout() 函数么?

    不过我看了下了个demo,好像并不涉及页面url 的转跳呀。
    breeswish
        3
    breeswish  
       2013-05-14 17:19:13 +08:00 via Android   ❤️ 1
    如果是在<a>中要避免浏览器立即跳转,可以用return false来实现

    至于楼主的情况,似乎不用这么麻烦,只需要有延时即可。最简单做法是用setTimeout()函数指定一个延时计时器,最好的做法如1#所说监听animationend事件,当触发时候再跳转。
    loading
        4
    loading  
    OP
       2013-05-14 18:06:20 +08:00
    已通过 @wctbok 提示方法解决,感谢提醒!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2803 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 12:59 · PVG 20:59 · LAX 04:59 · JFK 07:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.