使弹出动画工作答案

【问题标题】：making popover animation work使弹出动画工作
【发布时间】：2016-09-01 05:55:33
【问题描述】：

点击按钮后，我会显示一个弹出框。

但是，如果您注意到弹出框的指针从完全不同的方向滑动。

不能安静地解决这个问题。请多多指教。

.popover {
  position: absolute;
  top: 50px;
  left: -175px;

  width: 400px;
    height: 200px;
    background-color: rgb(233, 212, 222);
    border-radius: 4px;
  box-shadow: 3px -2px 4px #AAA;
  transition: all linear 0.5s;
}

.popover-arrow {
    position: absolute;
    top: -16px;
    left: 180px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid rgb(233, 212, 222);
  width: 0;
  height: 0;
    transition: all linear 0.01s;
}

plnkr：http://plnkr.co/edit/SiwYgmkZjh2NuszI0q2E

预期的行为是弹出框的指针也会像弹出框一样设置动画（从上到下）

【问题讨论】：

你想让我们做什么？期望的行为是什么？它应该做什么？
@AndrewL。单击他提供的链接以及他的行“如果您注意到弹出窗口的指针从完全不同的方向滑动。”，问题非常明显。
@TylerRoper 我正在寻找预期的行为，以便我们可以帮助解决问题，现在看到 OP 已将其添加到他的问题中，我认为没有问题
@AndrewL。我希望你给出这些负面评价是因为我真的应得的，而不是因为你有让你痛苦的个人事务，而你只是在寻找发泄的场所
在您添加预期行为后，我删除了反对票。请不要指责用户在决定投反对票时过于个人化。

标签： css angularjs css-animations

【解决方案1】：

这是由于添加到 .popover 类中的 ng-hide 类所致。它在动画之前设置了位置。

top: -18px;
left: 20px;

用这个覆盖它：

.ng-hide {
    top: -16px;
    left: -175px;
}

【讨论】：

这无疑是朝着正确方向迈出的一步。它修复了箭头的行为，但改变了盒子的行为

【解决方案2】：

感谢@Valius79 .. 我得到了一些工作

.popover {
  position: absolute;
  top: 50px;
  left: -175px;

  width: 400px;
    height: 200px;
    background-color: rgb(233, 212, 222);
    border-radius: 4px;
  box-shadow: 3px -2px 4px #AAA;
  transition: all linear 0.5s;
}
.popover.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-18px;
  left: 20px;
}

.popover-arrow {
    position: absolute;
    top: 35px;
    left: 5px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid rgb(233, 212, 222);
  width: 0;
  height: 0;
   transition: all linear 0.5s;
}


.popover-arrow.ng-hide {
  top: -36px;
  left: 5px;
}

http://plnkr.co/edit/SiwYgmkZjh2NuszI0q2E?p=preview

【讨论】：