1

Apple.com で非常に興味深いアニメーション効果を見つけました。

http://store.apple.com/au/buy-mac/mac-pro

画像が同様に弾力性があるようにアニメーション化されたメニューバーは非常に興味深い上部のメニューバーです。以下で簡単な実験を行いました。並べ替えは機能しますが、弾性効果が得られません。誰かがここで助けてくれますか? この影響を私のプロジェクトに使用したいと思います。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){

    $('ul').click(function() {
      $('ul li').each(function(i) {
        var $li = $(this);
        setTimeout(function() {
          $li.attr('style', 'styel="-webkit-transform: translateX(500px);"');
        }, i*100); // delay 100 ms
      });
    });
})
</script>
<style type="text/css">
li
{

    float: left;

    -webkit-transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -webkit-transform,left,-webkit-box-shadow;
    transition-property: -webkit-transform,left,-webkit-box-shadow;
    -moz-transition-property: -moz-transform,left,-moz-box-shadow;
    -ms-transition-property: -ms-transform,left,box-shadow;
    -o-transition-property: -o-transform,left,box-shadow;
    -webkit-transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    transition-duration: .4s,0.4s,100ms;
    -moz-transition-duration: .4s,0.4s,100ms;
    -ms-transition-duration: .4s,0.4s,100ms;
    -o-transition-duration: .4s,0.4s,100ms;
    -webkit-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -moz-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -ms-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    -o-transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
    transition-property: transform,left,box-shadow;
    transition-duration: .5s,0.5s,100ms;
    transition-timing-function: ease-in-out,ease-in-out,ease-in-out;
}
li.what
{
    -webkit-transform: translateX(878px);
}
</style>

<ul>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
    <li style="-webkit-transform: translateX(100px);"><img src="http://store.storeimages.cdn-apple.com/7415/as-images.apple.com/is/image/AppleInc/dept-shelf-macbook-air?wid=137&hei=56&fmt=png-alpha&qlt=95&.v=1381453600453"></li>
</ul>
4

1 に答える 1

0

完璧で最終的なアニメーションではありませんが、これでうまくいきます。

CSS

.container {
    width: 550px;
    height: 50px;
    overflow: hidden;
}

.child {
    border-left: 1px solid #660000;
    height: 50px;
    display: inline-block;
    width: 100px;
    font-size: 28px;
    position: relative;
    background-size: 60px 40px;
    background-position: center center;
    background-repeat: no-repeat;
    transition: left;

    transition-duration: 1.5s;
    transition-property: all;
    transition-timing-function: ease-out;
}

 .child:nth-child(1) {
     background-image: linear-gradient(90deg,lightgreen,lightgreen);
     transition-delay: 0.3s;
}

 .child:nth-child(2) {
     background-image: linear-gradient(90deg,lightblue,lightblue);
     transition-delay: 0.5s;
}
 .child:nth-child(3) {
     background-image: linear-gradient(90deg,lemonchiffon,lemonchiffon);
     transition-delay: 0.7s;
}
 .child:nth-child(4) {
     background-image: linear-gradient(90deg,lavender,lavender);
     transition-delay: 0.9s;
}
 .child:nth-child(5) {
     background-image: linear-gradient(90deg,linen,linen);
     transition-delay: 1.1s;
}

.container:hover .child {
   left: 550px;    
   padding-left: 70px;
    transition-timing-function: ease-in;
}

.container:hover .child:nth-child(1) {
     transition-delay: 1.1s;
}
 .container:hover .child:nth-child(2) {
     transition-delay: 0.9s;
}
.container:hover .child:nth-child(3) {
     transition-delay: 0.7s;
}
.container:hover .child:nth-child(4) {
     transition-delay: 0.5s;
}
.container:hover .child:nth-child(5) {
     transition-delay: 0.3s;
}

フィドル

フィドルで要素にカーソルを合わせると、アニメーションが表示されます。

「アウト」アニメーションと「イン」アニメーションには異なるプロパティが必要であることに注意してください。

于 2013-11-10T18:39:12.877 に答える