-1

对于曾经在平板设备上使用过 eBay 应用程序的人来说，您可能已经注意到，当您触摸产品时，产品视图会从标准网格视图切换，如下所示：

eBay 平板电脑应用网格视图

如下图所示，所有产品都移动到左侧导航，有关被触摸产品的详细信息放在右侧区域：

eBay平板应用产品详情查看

真正很酷的是动画将视图从一个转换到另一个。
具体来说，产品图像会缩小一点，然后滑到它们属于左侧导航的任何位置。（这在实际应用中比我解释的要容易得多。）

无论如何，我真的很喜欢这个动画，而且我很想能够在使用 HTML/CSS 的网站上创建相同的效果，但我没有运气。
我尝试在屏幕上将一堆 div 彼此相邻放置，并（通过单击按钮）使用 CSS3 过渡来缩小包含 div 的宽度，但结果只是 div 从一个位置突然跳转另一个没有任何流畅的动画或动作，这是我理想的选择。

如果仅使用 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);}
}

我设置了一个包含 9 个元素的数组，适合 3x3 网格。我已经将它们中的第 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 回答