Question

我正在尝试创建一个简单的可重用CSS类，这样我就可以在任何地方制作这个动画。

一切正常，但我找不到任何关于如何触发反向动画的示例/文档。

这是我的HTML：

<div class="cards">
        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>

        <div class="card">
            <div class="frontpage">
                <img src="http://lorempixel.com/400/200/"/>
            </div>
            <div class="rearpage">
                <img src="http://lorempixel.com/g/400/200/"/>
            </div>
        </div>
</div>

我的动画是一个“卡片翻转”式动画，在Javascript中使用简单的toggleClass来触发动画：

$('.card').click(function(){
    $(this).toggleClass('opened');
});

这是我的CSS：

.cards {
    width: 800px;
    margin: auto;
}

.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
}

.card .frontpage, .card .rearpage {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
}


.card .rearpage {
    width: 0%;
}

.card .frontpage img, .card .rearpage img {
    width: 100%;
    height: 100%;
}


/***** ANIMATIONS *****/

/* ANIMATION 1 */
.card .frontpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .frontpage {
    -webkit-animation-name: frontToRear;
}

@-webkit-keyframes frontToRear {
    0% { width: 100%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 0%; }
}

/* ANIMATION 2 */
.card .rearpage {
    -webkit-animation-duration: 1s;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-fill-mode: forwards;
}

.card.opened .rearpage {
    -webkit-animation-name: rearToFront;
}

@-webkit-keyframes rearToFront {
    0% { width: 0%; }
    50% { width: 0%; margin-left: 50%; }
    100% { width: 100%; }
}

这样做的聪明方法是什么？我希望我能在我的.rearcard上设置一些触发器以触发反转动画，但我找不到任何方法。

我知道我可以写其他2个“反转”动画并应用它们但是看起来很愚蠢我不能尝试做得更好。

我设置jsfiddle来帮助您分析和测试：http://jsfiddle.net/9yp3U/

Answer 1

使用边距和宽度来伪造旋转的方法非常有趣，但您可以使用rotateY

更简单地完成此操作

.cards {
    width: 800px;
    margin:auto;
    -webkit-perspective:1000;
}    
.card {
    width: 200px;
    height: 100px;
    position: relative;
    display: inline-block;
    margin: 10px;
    -webkit-transition: 1s ease-in;
    -webkit-transform-style: preserve-3d;
    -webkit-transform:translateZ(1px);
}    
.card .frontpage, .card .rearpage, img {
    width: 100%;
    height: 100%;
    position: absolute;
    top:0; 
    left:0;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
}
.card img {
    width: 100%;
    height: 100%;
}    
.card .rearpage,
.card.opened {
    -webkit-transform:rotateY(180deg);
}

Demo

至于您提出的问题，您可以使用animation-direction:backwards属性向后播放动画，但使用CSS切换动画is hard。因此，我建议您使用transition，因为它只是两种状态之间的变化。

为了以防万一，CSS选择器并不总是必须采用parent child格式。在您的情况下，只应用.child也会这样做。仅当需要比现有属性更高的选择器特异性时，parent child选择器才是必需的。

哦，还有FYI，jQuery并不是必需的。如果你愿意，我包括一个（未经测试的）javascript等价物。如果这是您在页面上使用jQuery的唯一地方，我建议不要使用它，因为加载整个jQuery库需要一些时间和数据。

CSS动画：如何触发反向动画？

1 个答案: