动画过渡对于 ng-hide-remove 和 ng-hide-add 的行为不同

Animation transitions behave differently for ng-hide-remove and ng-hide-add

本文关键字：ng-hide-add ng-hide-remove 动画      更新时间：2023-09-26

我正在尝试将<div>动画化为在单击按钮时从左侧滑入/滑出。我正在使用角度框架和ng-show来控制<div>显示/可见性，并向ng-hide样式集添加过渡。

我已经成功地让div 从左侧滑入，但我无法让它滑出（它在指定的延迟后消失）。我尝试在线修改几个示例以获得我所追求的行为无济于事。

JSFiddle适合任何想看的人https://jsfiddle.net/mquinlan/0wcrcwxe/5/

你几乎是对的，除了删除左：0在 .animate-show.ng-hide-add.ng-hide-add-active、.animate-show.ng-hide-remove.ng-hide-remove-active 的选择器中。

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
    -moz-transition: all ease 0.5s;
    transition: all ease 0.5s;
}

更新的小提琴：https://jsfiddle.net/vsj62g5r/

相关文章：