Question

我正在尝试创建一种碰撞测试假人，当您在document窗口中单击时，我的.person div将向右移动，然后在结束时向前倾斜，然后向后倾斜到原来的地方。

我已经获得了转换工作的css，只是它立即倾斜我的div而不是在运动结束时？对不起，如果这很难理解，我已经创建了一个jsFiddle来解释......

// On click my .person div will move right, once moved it needs to tilt forward and then backwards - as though its hit a wall...

$(document).on('click',function(){
    $('.person').animate({ "left": "+=250px" }, 500, crashImpact(30));
});

function crashImpact(tilt) {
    $('.person').css({
        transform: 'rotate(' + tilt + 'deg)'
    });
}

Answer 1

它需要一点工作，但你可以通过添加一个类和链接动画来完成CSS中的所有工作......

Demo Fiddle - （Chrome）

JS

$(document).on('click', function () {
    $('.person').addClass('go');
});

CSS

.person.go {
    -webkit-animation-delay:0, .5s;
    -webkit-animation-duration:.5s, .5s;
    -webkit-animation-iteration-count:1, 1;
    -webkit-animation-name:animForward, animTilt;
    -webkit-animation-timing-function:ease-in;
    -webkit-animation-fill-mode:forwards;
    -webkit-transform-origin: 0%;
}
@-webkit-keyframes animForward {
    from {
        margin-left: 0;
    }
    to {
        margin-left: 400px;
    }
}
@-webkit-keyframes animTilt {
    0% {
        -webkit-transform:rotate(0deg);
    }
    50% {
        -webkit-transform:rotate(45deg);
    }
    100% {
        -webkit-transform:rotate(0deg);
    }
}

Answer 2

$(document).on('click',function(){
    $('.person').animate({ "left": "+=250px" },500,function(){
        crashImpact(30);
    });
});

function crashImpact(tilt) {
    $('.person').css({
        'transform': 'rotate(' + tilt + 'deg)'
    });
}

我修改了你的代码。点击此处：http://jsfiddle.net/lotusgodkk/4mzg8/4/

Answer 3

你写过：

$('.person').animate({ "left": "+=250px" }, 500, crashImpact(30));

这将立即致电crashImpact function。

将其更改为：

$('.person').animate({ "left": "+=250px" },500,function(){
    crashImpact(30);
});

这将在crashImpact function执行完成后调用animate。

transition属性会顺利轮换.person。

写：

CSS：

.transform{
    transition:all 1s;
    -webkit-transition:all 1s;
}

JS：

function crashImpact(tilt) {
    $('.person').css({
        'transform': 'rotate(' + tilt + 'deg)'
    }).addClass("transform");
}

Updated fiddle here

动画后旋转div

3 个答案:

Demo Fiddle - （Chrome）