滚动列表的 CSS 动画

Question

我在 Angular.js 中创建了一个简单的滚动列表组件，大量借鉴了uib-bootstrap carousel component。它将ng-show 指令与ngAnimate、ng-hide-add、ng-hide-remove、ng-hide-add-active 和ng-hide-remove-active 类以及Animate.css 一起使用。

Here's a plunker

如您所见，我正在努力使 CSS 样式恰到好处，以使其看起来像是项目之间的平滑过渡；在position: absolute 和position: relative 之间切换时，这些项目有点晃动。

我尝试过调整元素的内边距和边距，但无济于事。

我认为答案在于 CSS，而不是 Angular 代码，但任何使这看起来不错的指针都非常感谢：

[list-scroller] {
    display: inline-block;
    padding: 0;
    margin: 0;
}

[list-scroller] li {
    list-style: none;
    margin: 0;
    padding: 0;
}

scroller-item {
    position: relative;
    margin: 0;
    padding: 0;
}

scroller-item.ng-hide-add {
    animation: fadeOutUp 0.5s;
    display: inline-block !important;
}
scroller-item.ng-hide-add-active {
    position: absolute !important;
}

scroller-item.ng-hide-remove {
    animation: fadeInUp 0.5s;
    display: inline-block !important;
}
scroller-item.ng-hide-remove-active {
    position: absolute !important;
}

我也不确定为什么在 plunker 上存在退出元素隐藏和进入元素显示之间的延迟。

非常感谢！

Answer 1

简单的解决方案：

.ng-hide-add.ng-hide-add-active {
  position: absolute;
  bottom: 0;
}