Question

我在<div>上制作了一个CSS3转换，可以在点击时切换。我设法在偶数点击（在jQuery .toggleClass的帮助下）进行我想要的转换，但我无法弄清楚如何顺利回到原始状态。

这意味着，我需要（在奇怪的点击事件中）div到向后旋转到正常，然后回到位置（使用{{ 1}}属性）。所有这些都是平滑作为偶数点击动画。

这是 FIDDLE

我的代码：

HTML：

top

CSS：

<div></div>

JS：

  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;
}

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;
}

Demo

Answer 2

我找到了使动画反转的解决方案：

<强> FIDDLE

CSS：

div {
    width:300px;
    height:100px;
    border-radius:2px;
    background:gold;
    position:absolute;
    left:40px;
    top:50%;
    margin-top:-1px;
    -webkit-transition: top 0.5s ease-out 0.5s, -webkit-transform 0.5s ease-out;
    -moz-transition: top 0.5s ease-out 0.5s, -moz-transform 0.5s ease-out;
    transition: top 0.5s ease-out 0.5s, transform 0.5s ease-out;
}
div.anim {
    -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;

    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);
}

过渡顺利回到原始状态

2 个答案: