css - Angular Bootstrap 动画选项卡过渡但不过渡

Question

我正在尝试在页面上选择不同的选项卡时添加动画幻灯片效果。到目前为止，它只成功了一半。

我正在使用 animate.css，因为我希望它能让事情变得非常简单，但我发现转换似乎只影响进入的内容，而不是离开的内容(即内容正确反弹) , 但不会滑出)。

我看到了这个悬而未决的问题，它似乎解决了同样的问题，但没有帮助我找到答案(https://stackoverflow.com/questions/19961952/angularjs-1-2-animations-with-animate-css-hide-animation-doesnt-seem-to-fire)。

谁能指出我正确的方向？

傻瓜在这里:http://plnkr.co/edit/cERDGS2zvUxOyqboFZXT?p=preview

谢谢

Answer 1

您可以在选项卡区域内覆盖 bootstrap 的 css:

.tab-content>.tab-pane {
    display: none;
}

与

.tab-content>.tab-pane {
    display: block;
}

然后你可以做一些 CSS/JS 技巧来绝对定位其他元素，这样它就不会穿过布局。我实际上有同样的问题。我看到了这篇文章，我认为它也帮助我解决了我的问题。谢谢，我希望这会有所帮助。

我的 plunkr:http://plnkr.co/edit/tgpyZq3JD1hwxtwCwWv8?p=preview