带有 angularjs 的 CSS 幻灯片动画

Question

我正在尝试使用带有 CSS3 过渡的 ng-show 为 div 设置动画。有 2 个 div：一个在前景中，另一个隐藏在它后面。当用户将鼠标悬停在前景 div 上时，隐藏的 div 应该向上滑动。如果用户光标移动到幻灯片 div 上，它也应该保持显示。如果用户光标离开幻灯片 div 或前景 div，它应该向下滑动。但它似乎无法正常工作。这是一个笨蛋：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 基类定义显示的状态（距底部30px）：

.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 被放在那里的原因。

您必须在transition 上使用!important，否则如果您在元素上来回移动光标，Angular 将用transition: none 短暂覆盖它，这将导致转换中断并且元素捕捉到它的最终位置。

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

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

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