html - CSS 动画侧边按钮标签

Question

每行右侧都有一个标记触发器。 其中一些标签可能包含消息。最初只有一个指示器图标 被显示，消息被隐藏。 (我画的溢出 用于演示，但可能还有其他方法)当显示图标 悬停时，整个标签将向左移动并显示 带有按钮的消息。

问题来了。首先，我无法在纯 CSS 中为具有可缩放消息长度的标签设置动画。其次，由于我为每行使用固定高度，所以我无法为消息文本设置正确的垂直对齐属性。

这是我的尝试 http://codepen.io/rix/pen/DaGyk .

Answer 1

<强>1。无论消息长度如何，要将消息的左边缘与行的右边缘对齐: 首先使用 right: 50px 绝对定位消息(因为您想要左图标显示)，然后应用 transform: translateX(100%):

.card-item .control {
  position: absolute;
  right: 50px;
  transform: translateX(100%);

  /* other styles... */
}

<强>2。要在悬停时为消息设置动画: 您需要在 .control 上定义一个 transition，然后简单地 transform: translateX(0)在 :hover 上。此外，设置 right: 0 以便消息的右边缘与行的右边缘齐平。

.card-item .control {
  position: absolute;
  right: 50px;
  transform: translateX(100%);
  transition: all 0.3s;

  /* other styles... */
}

.card-item .control:hover {
  right: 0;
  transform: translateX(0);
}

<强>3。要垂直对齐消息文本: 因为消息的高度是固定的，所以将消息文本的 line-height 设置为 height 行，即50px，和vertical-align: top:

.card-item .control .message {
  /* remove this: margin-top: -8px; */
  line-height: 50px;
  vertical-align: top;
}

http://codepen.io/myajouri/full/jCBiH