使用CSS3转换保留状态

Question

我想分两部分创建一个动画。我解释一下。

我有一个矩形，在动画开始时，顶部会有一个缩小的动画。在这个动画结束后，我想保持这种状态，使用js来检测动画何时完成，并添加我的第二个动画缩小矩形的底部。目前，有两个动画，但不要记住以前的状态。

@-webkit-keyframes scale {
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }
}
@-moz-keyframes scale {
    100% {
        -moz-transform-origin: 50% 100%;
        -moz-transform: perspective(900px) rotateX(10deg);
    }
}

.scale {
    -webkit-transform-origin: 50% 100%;
    -webkit-transform: perspective(900px) rotateX(10deg);

    -moz-transform-origin: 50% 100%;
    -moz-transform: perspective(900px) rotateX(10deg);
}

@-webkit-keyframes toto {
    100% {
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(900px) rotateX(-10deg);
    }
}

@-moz-keyframes toto {
    100% {
        -moz-transform-origin: 50% 0%;
        -moz-transform: perspective(900px) rotateX(-10deg);
    }
}

.scale2 {
    background: purple !important;

    -webkit-animation: toto 1.4s ease forwards !important;
    -moz-animation: toto 1.4s ease forwards !important;
}

有点代码：http://jsfiddle.net/JeremDsgn/Dfyam/2/

Answer 1

我建议您使用jQuery Transit之类的插件，因为它非常适合保留css3过渡/转换的状态，尤其是在您计划进行大量动画时。它比维护一个大的CSS文件容易得多。

示例：

//Initial settings on Window DIV
$('#window').css( { 'transformOrigin': '50% 100%', perspective: '900', rotateX: 10 } );


$('#yoyo').on("click", function () {

    $('#window').transition( { background: 'purple' }, 1400, 'in', function () {
        //Do any additional animations here, such as change the background again
        $('#window').delay(2000).transition( { background: 'blue' }, 3000, 'out');
    });    

});

JS Fiddle Demo

Answer 2

你可以做以下两件事之一：

在第二个动画中添加from或0%：

http://jsfiddle.net/trolleymusic/y2Hxc/

@-webkit-keyframes scale {
    100% {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }
}
@-webkit-keyframes toto {
    from {
        -webkit-transform-origin: 50% 100%;
        -webkit-transform: perspective(900px) rotateX(10deg);
    }   
    to {
        -webkit-transform-origin: 50% 0%;
        -webkit-transform: perspective(900px) rotateX(-10deg);
    }
}

或者在添加第二个转换之前使用javascript将当前转换属性添加到元素作为内联样式 - 我想想这就是你想要的内容：

http://jsfiddle.net/trolleymusic/TbwfC/

// Listener
$('window').addEventListener('webkitAnimationEnd', function() {
    this.style.webkitTransform = window.getComputedStyle(this)["-webkit-transform"];
    this.style.webkitTransformOrigin = window.getComputedStyle(this)["-webkit-transform-origin"];
    this.className = 'scale2';
}, false);

因此，您可以从window.getComputedStyle获取当前变换矩阵和原点，并在更改类名之前将其应用于元素。

我删除了-moz-前缀行以保持代码更短 - 因为 ROFLwTIME 指出它可以很快变长。显然，使用第二种解决方案时，您必须看到如何在其他浏览器中实现它，因为他们需要阅读各自的前缀或transform和transform-origin的非前缀版本。

SASS的快速插件

如果您关心CSS的复杂性和大小，我会考虑查看SASS（http://sass-lang.com）和Compass（http://compass-style.org），特别是对于变换和动画。而不是写：

-webkit-transform: rotateX(10deg);
-moz-transform: rotateX(10deg);
-ms-transform: rotateX(10deg);
-o-transform: rotateX(10deg);
transform: rotateX(10deg);

你写道：

@include transform(rotateX(10deg));

SASS会将所有这些行输出到你的CSS中。它使编写动画，变换和转换更易于管理。