带有angularjs的CSS幻灯片动画

Question

我正在尝试使用带有 CSS3 过渡的 ng-show 为 div 设置动画。有 2 个 div:一个在前景中，另一个隐藏在它后面。当用户鼠标悬停在前景 div 上时，隐藏的 div 应该向上滑动。如果用户光标移到幻灯片 div 上，它也应该保持显示。如果用户光标离开幻灯片 div 或前景 div，它应该向下滑动。它似乎不能正常工作。这是一个 plunker:http://plnkr.co/edit/C1RaDTOXwpEMECGMkt19?p=preview

css 是否正确？

div#cover {
  background-color: lightblue;
  width: 90px;
  height: 30px;
  position:absolute;
  bottom: 0px;
  z-index:10;
}


.slide {
  background-color: white;
  width: 90px;
  height: 30px;
  position:absolute;
  bottom: 0px;
  z-index:5;
}

.slide.ng-hide-add, .slide.ng-hide-remove { 
    transition: bottom 1s ease;
}

.slide.ng-hide-remove-active {
    bottom: 30px
}

.slide.ng-hide-add-active {
    bottom: 0px
}

有什么想法吗？

Answer 1

你只需要两个状态:

1. 显示
2. 隐藏

让基地slide类定义显示的状态(距离底部 30 像素):

.slide {
  background-color: white;
  width: 90px;
  height: 30px;
  position: absolute;
  bottom: 30px;
  z-index: 5;
  transition: 1s ease bottom !important;
  display: block !important;
}

当 ng-show 中使用表达式时指令被评估为 false 隐藏状态将被激活并且类 ng-hide将被 Angular 添加到元素中。

使用该类装饰基类并定义隐藏状态(距离底部 0px):

.slide.ng-hide {
  bottom: 0;
}

这意味着这两个状态在激活时将具有以下类:

1. 显示:slide
2. 隐藏:slide ng-hide

如您所见slide类始终存在，这就是为什么 transition放在那里。

您必须使用 !important在 transition 上否则，如果你在元素上来回移动光标，Angular 将用 transition: none 覆盖它。短暂地，这将导致过渡中断并且元素卡入其最终位置。

您还必须使用 display: block !important在slide类来覆盖 ng-hide 的默认行为，即 display: none .

演示: http://plnkr.co/edit/WN8v2riSYhhMyOgbZiWO?p=preview

注意:我个人不建议使用 ng-mouseenter或 ng-mouseleave为了这。每次他们触发整个摘要循环时，所有观察者都会被执行多次。另一种方法是创建一个使用事件监听器手动添加/删除类的指令。