ng-hide-remove 和 ng-hide-add 的动画转换表现不同

Question

我正在尝试在单击按钮时将 <div> 设置为从左侧变为 slide-in/out 的动画。我正在使用 angular 框架和 ng-show 来控制 <div> display/visibility，并将转换添加到 ng-hide 样式集。

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

任何想看的人都可以使用 JSFiddle https://jsfiddle.net/mquinlan/0wcrcwxe/5/

Answer 1

除了在 .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;

}

已更新 Fiddle：https://jsfiddle.net/vsj62g5r/

ng-hide-remove 和 ng-hide-add 的动画转换表现不同

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

javascript

css

css-transitions

css-animations

angularjs