物料图标上的过渡

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. 转移第一个图标的左边距，以便在卡片悬停时将其移出视图。这将自动将第二个图标移动到视图中，因为它就在它之后。

我在下面演示了这一点。为了不对所有卡片自动执行此操作，我将样式限制为类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>