过渡顺利恢复原状

Question

我在 a 上做了一个 CSS3 tansition，<div>它可以在点击时切换。我设法在偶数点击（在 jQuery 的帮助下.toggleClass）进行了我想要的转换，但我不知道如何顺利​​回到原始状态。

这意味着，我需要（在奇数点击事件）在div以旋转返回到正常再回来位置（与top属性）。所有这一切都像偶数点击动画一样流畅。

这里有一个 小提琴

我的代码：

HTML :

<div></div>

CSS :

  div {
    width:300px;
    height:100px;
    border-radius:2px;
    background:gold;
    position:absolute;
    left:40px;
    top:50%;
    margin-top:-1px;
}
div.anim {
    top:30%;
    -webkit-transform: rotate3d(0, 0, 1000, 45deg);
    -moz-transform: rotate3d(0, 0, 1, 45deg);
    -ms-transform: rotate3d(0, 0, 1, 45deg);
    -o-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1000, 45deg);
    -webkit-transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
    -moz-transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
    transition: top 0.5s ease-out, transform 0.5s ease-out 0.5s;
    -webkit-transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.5s;
    -moz-transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.25s;
    transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.25s;
}

JS：

$(document).ready(function () {
    $('div').click(function () {
        $(this).toggleClass('anim');
    });

});

Answer 1

将过渡放在基础元素中。另外，您有重复的转换语句，我不确定您想要哪个，但后者会覆盖前者

div {
    /* ... Other properties ...*/
    -webkit-transition: top 0.5s ease-out, -webkit-transform 0.5s ease-out 0.5s;
    -moz-transition: top 0.5s ease-out, -moz-transform 0.5s ease-out 0.25s;
    transition: top 0.5s ease-out, transform 0.5s ease-out 0.25s;
}

演示