Question

材料设计具有Material Joining的概念。这个想法是＆＃34;材料可以与其他材料结合，或者它可以分成多个部分。当两块材料彼此接近时，它们的边缘在移动完成之前相互交叉并且边缘重叠。＆＃34; Material Design spec有一个非常好的视觉效果。

这个概念似乎难以在网上实施。我尝试了各种策略，但都导致了失败。 Here是我的一次尝试。我的尝试违反了问题2，因为阴影出现在兄弟姐妹之上，直到过渡完成。它也违反了陷阱3，因为转换时间不是＆＃34;反转＆＃34;相互之间，更重要的是，在纸张连接之前，阴影出现在沿着边缘的材料页之间。

以下是我发现的一些问题：

1）它必须适用于大多数框阴影。框阴影可视化材料设计中材料的高度。材料越高，阴影越大。

2）盒子阴影可以从不出现在兄弟元素之上 - 即使在过渡期间也是如此。

3）在过渡之前，期间和之后，箱子阴影必须是一致的黑暗。

获得几乎符合规范的实现非常容易，并且大多数人都不会注意到符合规范的实现与否之间的区别。我怀疑在材料设计规范中投入了大量时间和思想，忽略细节会不尊重他们的努力。

我的一次尝试：

<style type="text/css">
  body {
    background: #f39c12;
  }
  .parent, .material.appart {
    transition: all 0.4s, box-shadow .1s .3s;
  }
  .parent.active, .material.appart {
    transition: all 0.4s, box-shadow .3s .1s;
  }
  .parent, .material {
    transition: all 0.4s, box-shadow .3s .15s;
  }
  .parent {
    margin: 0 auto;
    margin-top: 30px;
    width: 200px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,1);
    border-radius: 2px;
  }
  .parent.appart { 
    box-shadow: none;
  }

  .material {
    text-align: center;
    width: 200px;
    height: 50px;
    margin-top: -5px;
    margin-right: 0px;
    background: white;
    border-radius: 2px;
  }

  .material:last-child {
    box-shadow: 0 1p 3px rgba(0, 0, 0, 1), 0 1p 2px rgba(0, 0, 0, 1);
  }

  .material.appart {
    margin-top: 10px;
    height: 50px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,1);
  }
</style>
<div class="parent">
 <div class="material"></div>
  <div class="material"></div>
  <div class="material"></div>
</div>
<script type="text/javascript">
  $('.material').click(function() {
     $('.material').toggleClass('appart');
     $('.parent').toggleClass('appart');
  });
</script>

材料设计：材料连接

0 个答案: