-1

タブレット デバイスで eBay アプリを使用したことがある方は、商品に触れると、商品ビューが次のように標準のグリッド ビューから切り替わることに気付いたかもしれません。

eBay タブレット アプリのグリッド ビュー

次のようなビューでは、すべての製品が左側のナビゲーションに移動し、タッチした製品に関する詳細が右側の領域に表示されます。

eBay タブレット アプリの製品詳細ビュー

本当に素晴らしいのは、ビューを別のビューに変換するアニメーションです。
具体的には、製品の画像が少し縮小されてから、左側のナビゲーションにある場所にスライドします。(これは、私が説明するよりも、実際のアプリで確認する方がはるかに簡単です。)

とにかく、私はアニメーションが本当に好きで、HTML/CSS を使用して Web サイトで同じ効果を作成できるようにしたいのですが、うまくいきませんでした.
画面上で多数の div を隣り合わせに配置し、(ボタンをクリックして) CSS3 トランジションを使用して含まれている div の幅を縮小しようとしましたが、結果として div が 1 つの場所から突然ジャンプするだけでした。理想的には、流動的なアニメーションや動きのない別のものに。

私が達成しようとしていることが HTML/CSS だけでは不可能である場合は、それで問題ありませんが、質問をする前に、私よりもはるかに賢明な人に質問を委ねたいと思います。
誰かがこれを行う方法を知っている場合 (または、それは不可能であると断定的に言うことができる場合)、私は非常に感謝しています。

ありがとうございました。

4

2 に答える 2

1

難しいことではありませんが、すべての詳細を行うのは少し退屈です

このhtmlの

<div class="container">
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
<div id="elem4"></div>
<div id="elem5"></div>
<div id="elem6"></div>
<div id="elem7"></div>
<div id="elem8"></div>
<div id="elem9"></div>
</div>

このCSSを用意しました

.container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid green;
}

.container div {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  background-color: lavender;
}

#elem5 {
  left: 100px;
  top: 100px;
}

.container:hover div {
  -webkit-animation-duration: 3s;
  -webkit-animation-direction: normal;
  -webkit-animation-fill-mode: forwards;
}

#elem5 {
  left: 100px;
  top: 100px;
}

.container:hover #elem5 {
  -webkit-animation-name: an5;
}

@-webkit-keyframes an5 {
  0% {-webkit-transform: scale(1);}
  50% {-webkit-transform: scale(0.33);}
  100% {-webkit-transform: translateX(-133px) scale(0.33);}
}

#elem9 {
  left: 200px;
  top: 200px;
}

.container:hover #elem9 {
  -webkit-animation-name: an9;
}

@-webkit-keyframes an9 {
  0% {-webkit-transform: scale(1);}
  50% {-webkit-transform: scale(0.33);}
  100% {-webkit-transform: translateX(-233px) translateY(33px) scale(0.33);}
}

3x3 グリッドに収まる 9 つの要素の配列を設定しました。そして、5 番目と 9 番目をあるべき位置に配置し、それらをリストの位置に移動するアニメーションを作成しました。

(Webkit 変換のみ)

残りの 7 つの要素のアニメーションを作成し、アニメーションを詳しく説明します (より多くのキーフレームを使用)。

ジフィドル

あなたのコメントによると、それを行う別の方法です。

デモは、3 列のグリッド用に用意されています。次に、キーはフロー内の 3 つごとの最初の子のみを持つことです。残りの 2 つは絶対位置にあるため、フロー外です。これにより、要素の配置のために nth-child に基づく一般的なルールを作成できます。

アニメーションを設定すると、このスタイルは任意の数の要素に適応します (また、列のデザインと同じ数のアニメーションを設定するだけで済みます)。

CSS

.container {
  height: 500px;
}

.child {
  width: 100px;
  height: 100px;
  font-size: 40px;
  text-align: center;
  line-height: 90px;
  box-shadow: inset 0px 0px 2px black;
}

.child:nth-child(3n+1) {
     background-color: lightblue;
}

.child:nth-child(3n+2) {
     position: absolute;
     -webkit-transform: translate3d(100px, -100px, 0px);
     background-color: lightgreen;
}

.child:nth-child(3n) {
     position: absolute;
     -webkit-transform: translate3d(200px, -100px, 0px);
     background-color: lightyellow;
}

.container:hover .child {
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-duration: 8s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: linear;
  width: 300px;
}
.container:hover .child:nth-child(3n+1) {
  -webkit-animation-name: ani1;
}
.container:hover .child:nth-child(3n+2) {
  -webkit-animation-name: ani2;
}
.container:hover .child:nth-child(3n+3) {
  -webkit-animation-name: ani3;
}



@-webkit-keyframes ani1 {
  0% {width: 100px; -webkit-transform: scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(-70px, -20px, 0px) scale(0.33);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -40px, 0px) scale(0.33);}
}

@-webkit-keyframes ani2 {
  0% {width: 100px;-webkit-transform: translate3d(100px, -100px, 0px) scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(0px, -90px, 0px) scale(0.33);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -106px, 0px) scale(0.33);}
}
@-webkit-keyframes ani3 {
  0% {width: 100px; -webkit-transform: translate3d(200px, -100px, 0px) scale(1);}
  50% {width: 300px; -webkit-transform: translate3d(80px, -100px, 0px) scale(0.33) rotate(180deg);}
  100% {width: 300px; -webkit-transform: translate3d(-100px, -73px, 0px) scale(0.33)  rotate(359.99deg);}
}

再利用可能なフィドル

(webkit のみ。楽しみのため、ローテーションを追加)

于 2013-11-06T17:50:22.550 に答える
0

iPad では、CSS の -webkit-transform プロパティを使用してこれを行うことができます。

CSS

.menu-open {
    -webkit-transform: translate3d(260px, 0, 0);
}

#main {
    -webkit-transition: -webkit-transform 150ms ease-in;
    transition: -webkit-transform 150ms ease-in;
    overflow: visible;
    width: 100%;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    top: 0;
    left: 0;
    position: absolute;
    color: #333;
    background-color: white;
    display: block;
    min-height: 100%;
}

#menu 
{
    position: absolute;
    width: 100%;
    position: absolute;
    width: 259px;
    top: 0;
    left: 0;
    background: white;
    margin: auto;
    min-height: 100%; 
    height:auto !important; 
    height:100%; 
    overflow: hidden !important;
    display:block;
}

HTML

<div id="menu" style="display:none; background-color: #cccccc;">
    <div>Text</div>
</div>
<div id="main">
    <input type="button" id="menuToggle" value="Toggle" />
</div>

JS

function showMenu() {
    $("#menu").show(0);

    $("#main").addClass('menu-open');
}

function hideMenu() {
    if ($("#main").hasClass('menu-open')) {
        $("#main").removeClass('menu-open');
        setTimeout(function () { $("#menu").hide(); }, 500);
    }
}

$(document).ready(function () {
    var body = $("#main"),
        menuToggle = $('#menuToggle'),
        menu = $("#menu");

    menuToggle.bind('click', function (ev) {
        ev.preventDefault();
        if (body.hasClass('menu-open')) {
            hideMenu();
        } else {
            showMenu();
        }
    });
});

例については、この JsFiddleを参照してください。正しく理解できていることを願っています (現時点では iPad はありません)。

于 2013-11-06T00:38:02.343 に答える