CSS Animated Side-button-tag

Question

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

现在这是问题所在.首先,我无法在纯CSS中使用可伸缩的消息长度为标记设置动画.其次,因为我为每一行使用固定高度,所以我无法为消息文本设置正确的垂直对齐属性.

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

Answer 1

1. 无论消息长度如何，要将消息的左边缘与行的右边缘对齐：首先使用 a 绝对定位消息right: 50px（因为您希望显示左侧图标），然后应用 a transform: translateX(100%)：

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

  /* other styles... */
}

2. 要在悬停时为消息设置动画：您需要定义一个transitionon .control，然后简单地transform: translateX(0)定义 on :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和：50pxvertical-align: top

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

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