CSS幻灯片动画与angularjs(CSS slide animation with angula

我试图用NG-显示与CSS3过渡动画一个div。 有2周的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指令被评估为假隐藏状态将被激活，并且类ng-hide将由角被添加到元件。

使用该类来装饰的基类，（从底部0像素）定义隐藏状态：

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

这意味着活跃在这两个国家将有以下类别：

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

正如你所看到的slide类是始终存在的，这就是为什么transition是放在那里。

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

您还必须使用display: block !important在slide类重写的默认行为ng-hide ，这是display: none 。

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

注：我个人不建议使用ng-mouseenter或ng-mouseleave了这一点。 每次他们触发了整个消化周期，所有的观察家会被执行多次。 另一种方法是创建一个使用事件侦听器添加/手动删除班一个指令。

文章来源: CSS slide animation with angularjs