css - Material 图标上的过渡

Question

我有兴趣在 Material Design 卡片的图标中使用过渡。

示例 1.

示例 2.

这是我目前得到的:Codepen .

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
  <div class="card hoverable">
    <div class="card-image">
      <img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
      <h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">arrow_forward</i><i class="material-icons">arrow_forward</i></a>
    </div>
    <div class="card-content">
      <div class="chip teal">
        <a class="white-text" href="#!">Tags</a>
      </div>
      <div class="chip teal">
        <a class="white-text" href="#!">Tags 2</a>
      </div>
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>

问题。 如果我将两个图标和一些 overflow: hidden; 添加到图标的容器中，问题是图标向下移动。我很不高兴为图标设置 CSS 过渡。

Answer 1

可以按如下方式重新创建第一个屏幕截图。

1. 确保按钮内的图标在同一行。
   这可以通过在按钮上使用 white-space: nowrap; 来完成。
2. 当卡片悬停时，过渡第一个图标的左边距以将其移出 View 。这会自动将第二个图标移到 View 中，因为它紧随其后。

我在下面演示了这一点。为了不对所有卡片自动执行此操作，我将样式限制为类为 two-icons 的卡片。我已将那个类添加到您的 HTML 中，否则没有变化。

.card {
  max-width: 250px; /* only for display purposes on Stack Overflow */
}

.two-icons .btn-floating {
  white-space: nowrap;
}

.two-icons .btn-floating .material-icons:first-child {
  transition: margin-left .4s;
}

.two-icons:hover .btn-floating .material-icons:first-child {
  margin-left: -56px;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<div class="container">
  <div class="card hoverable two-icons">
    <div class="card-image">
      <img alt="Kirito" src="https://azure.microsoft.com/svghandler/cdn/?width=600&height=315">
      <h2 class="card-title"><a class="white-text" href="#!">Card Title 1</a></h2><a class="btn-floating btn-large halfway-fab waves-effect waves-light red"><i class="material-icons">feedback</i><i class="material-icons">arrow_forward</i></a>
    </div>
    <div class="card-content">
      <div class="chip teal">
        <a class="white-text" href="#!">Tags</a>
      </div>
      <div class="chip teal">
        <a class="white-text" href="#!">Tags 2</a>
      </div>
      <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>