1

我需要一个小滑块演示

我希望我可以将报告标题从这个普通版本（查看全屏）变成这样的东西：

需要的结果

也很高兴拥有：

  1. 在 css 动画中也可以移动图标，而不是使用 jQuery
  2. 图标进入后旋转 3d 动画
  3. 有更多.slide按顺序出现的元素

无需跨浏览器的麻烦，一切都将在最新版本的 chrome 中运行。

编辑

我看到我可以使用 jQuery 轻松处理添加类的转换，但是，由于在不同元素上按顺序添加似乎并不容易，我必须设置匹配转换持续时间的超时：

$().ready(function(){
    $('.icon').addClass('in');
    setTimeout(function(){
        $('h1').addClass('on');
    }, 1000);
    setTimeout(function(){
        $('.icon').addClass('out');
    }, 2000);    
});

见 JSFiddle

有更好的解决方案吗？

4

3 回答 3

2

解决方案是应用-webkit-perspective和-webkit-perspective-origin到标题容器：

-webkit-perspective: 150; /* Safari and Chrome */
-webkit-perspective-origin: 10% 10%; /* Safari and Chrome */

观看现场演示

于 2013-04-26T18:56:07.533 回答
1

如果您不想使用 setTimeout，您可以将每个动画分解为一个单独的函数，并通过如下回调将它们串在一起：

$().ready(function(){
    animationOne();
});

function animationOne()
{
     $('.icon').transition( { 'margin-top': 0 }, 2000, 'in', animationTwo ); 
}

function animationTwo() 
{
    $('h1').transition( { 'font-size': '5em', perspective: 200, rotateY: -15 }, 1000, 'in-out', animationThree );
}

function animationThree()
{
     $('.icon').transition( { 'margin-left': '-600px' }, 2000, 'in-out'); 
}

JS 小提琴演示

基本上，一旦动画完成，下一个函数就会被调用，允许你做连续的动画。我在上面的例子中使用了jQuery Transit，如果你想做很多转换/变换而不需要处理大的 css 文件，这是完美的。

于 2013-05-10T18:46:06.953 回答
0

您可以使用 CSS3 的变换沿 z 轴旋转物体：

-webkit-transform: rotateY(120deg);

当然，这些属性是可动画的（我不知道这是不是一个词）与 CSS3 过渡：

-webkit-transition-property: -webkit-transfom;

（我之所以使用-webkit-它，是因为您在问题中说它只能在 Chrome 中运行。）

如果您也将其他属性添加到过渡属性，则可以使用$("#whatever").css().

于 2013-04-26T17:13:48.667 回答