Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

对css3 动画的不解 #104

Open
mishe opened this issue Mar 21, 2016 · 1 comment
Open

对css3 动画的不解 #104

mishe opened this issue Mar 21, 2016 · 1 comment

Comments

@mishe
Copy link
Owner

mishe commented Mar 21, 2016

有js设置css3动画函数如下

css3Hack:(key,value){
    function ch(key,value){
        var d={}
        d['-weikit-'+key]=value;
        d['-moz-'+key]=value;
        d['-ms-'+key]=value;
        d[key]=value;
        return d;
    }
    $(this).each(function(){
        $(this).css(ch(key,value));
    });
}
translate3d: function (x, y, z) {
        x = x || 0, y = y || 0, z = z || 0;
        $(this).css3Hack('transform','translate3d(' + x + 'px,' + y + 'px,' + z + 'px)');
    },

调用方式1

$('').translate3d($(window).width());

有明显的css动画效果

调用方式2

$('').translate3d(320);

完全没有css动画效果

这是什么情况?

$(window).width()返回的是320, 直接使用数字为什么就不行呢?

@mishe
Copy link
Owner Author

mishe commented Mar 23, 2016

今天无意中发现,直接设置为直接数值的时候,在给增加一个setTimeout就能正常显示动画了;
想来这个应该是js的单线程执行采用单函数为界限有关了;调用$(window).width()正好起到了切换执行函数的作用

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant