Question

这可能是一个愚蠢的问题，但有一种方法可以在浏览器中创建移动应用程序等动画。参考链接：http://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-meaningful-transitions-examples

如果可以像这样构建一些东西，那就太好了。我知道一些javascript / jquery，但这似乎是出于我的知识。

任何技术细节都会有所帮助

Answer 1

您可以尝试使用famo.us：http://famo.us/

它是一个新框架，因此存在一些问题，但它有潜力。它依赖于矩阵变换，并且可以做出非常惊人的事情，例如：http://www.youtube.com/watch?v=6jg-PlisAFc

您可以在此处查看更多演示：http://famo.us/demos/

此处有一个DNA螺旋示例：http://www.youtube.com/watch?v=JbIL3asjZBs

希望这有帮助。

Answer 2

这是一个小例子，您可以通过一些jQuery来触发动画，通过类更改和CSS3过渡来处理动画。

需要进行一些调整和自定义才能达到链接动画的质量，但它表明CSS3 / jQuery动画可以非常流畅。

<强> DEMO

HTML：

<header></header>
<section>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    <article>
        <div class="wrap">
            <img src="" alt="" />
            <p>some text</p>
        </div>
    </article>
    ....
</section>

CSS：

body,html{margin:0;}
header{
    height:100px;
    background:#000;
}
article{
    float:left;
    width:50%;
    padding-bottom:16%;
    position:relative;
    color:#fff;
}
article .wrap{
    position:absolute;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:1;
    background-color: rgba(0, 0, 0, 0.9);

    -webkit-transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
    transition: width 0.2s ease-out, height 0.2s ease-out, 1s z-index 0s;
}
article .wrap img{
    display:block;
    width:100%;
    height:auto;
}
footer{
    height:50px;
    width:100%;
    position:fixed;
    bottom:0;
    left:0;
    background:#000;
}
article:nth-child(odd) .wrap.show{
    width:200%;
    height: 100vh;
    z-index:2;
    -webkit-transition: width 0.2s ease-out, height 0.6s ease-out;
    transition: width 0.2s ease-out, height 0.6s ease-out;
}

jQuery：

$('.wrap').click(function(){
    $('.wrap').not(this).removeClass('show');
    $(this).toggleClass('show');
});

在浏览器中创建移动应用程序等动画

2 个答案: