我正在尝试使用带有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
}
有任何想法吗？
您只需要两个状态：
让基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;
}
这意味着两个状态在激活时将具有以下类别：
slideslide 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为此。每当它们触发整个摘要周期时，所有观察程序都将被执行多次。另一种选择是创建一个使用事件侦听器的指令，以手动添加/删除类。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句