CSS Animated Side-button-tag

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。要在悬停时设置消息动画，您需要在transition上定义.control，然后在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，{ {1}}：

vertical-align: top

<强> http://codepen.io/myajouri/full/jCBiH

Answer 2

在这个例子中，我将卡片下方的pop-over-part弹出到右边。改变右边：-10到10并改变背景位置：左上角可以帮助你。你可以玩它。

将每一行保留为li，你可以给你的一个班级：

li {
text-align: -webkit-match-parent;
line-height: 20px;
}

.pop-over-part {
position: absolute;
right: -10px;
top: 6px;
height: 100%;
width: 10px;
display: inline-block;
background-image: url(/assets/icons/tab-x.png);
background-repeat: no-repeat;
background-position: top right;
cursor: pointer;
}