我正在尝试使用带有 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
}
有什么想法吗?
最佳答案
你只需要两个状态:
- 显示
- 隐藏
让基地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;
}
这意味着这两个状态在激活时将具有以下类:
- 显示:
slide
- 隐藏:
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
为了这。每次他们触发整个摘要循环时,所有观察者都会被执行多次。另一种方法是创建一个使用事件监听器手动添加/删除类的指令。
关于带有angularjs的CSS幻灯片动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27140770/