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。< / p>

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;
}

我也不确定为什么在弹药上隐藏现有元素和显示输入元素之间存在延迟。

非常感谢！

Answer 1

简单的解决方案：

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

滚动列表的CSS动画

1 个答案: