0

我想创建一个分为两部分的动画。我稍微解释一下。

我有一个矩形，在动画开始时，顶部会有一个要缩小的动画。在这个动画结束之后，我想保持这个状态，使用 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;
}

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

4

2 回答 2

0

我建议您使用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 小提琴演示

于 2013-05-10T17:46:11.263 回答
0

您可以执行以下两项操作之一：

将fromor添加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指出的那样，它会很快变长。显然，使用第二种解决方案，您将不得不观察您如何在其他浏览器中实现它，因为它们需要读取各自的前缀或transformand的非前缀版本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 中。它使编写动画、变换和过渡更易于管理。

于 2013-05-12T19:17:19.333 回答