Question

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

然而，如果您注意到弹出窗口的指针从完全不同的方向滑动。

不安静能解决这个问题。请建议。

.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

预期的行为将是弹出窗口的指针也是动画，就像弹出窗口一样（从上到下）

Answer 1

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

top: -18px;
left: 20px;

用这个覆盖它：

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

Answer 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

制作popover动画作品

2 个答案: