AngularJS 从 1.1.5 到 1.5.1 的动画幻灯片问题

Question

我正在尝试在调用 ng-show 时在动画中播放幻灯片。

元素将从右侧滑入。

如果我使用的是 1.1.5，它可以完美地工作，如 fiddle (https://jsfiddle.net/sbcjdqwk/1/)

中所示

我知道 ng-animate 从 1.2 开始就被弃用了，我已经为 1.5.5 做了必要的调整。

.slide.ng-enter {
    position: relative;
    left: -100%;
}

.slide.ng-enter.ng-enter-active {
    transition: all 1s;
    left: 0;
}

.slide.ng-leave {
    position: relative;
    left: 0;
}

.slide.ng-leave.ng-leave-active {
    transition: all 1s;
    left: -100%;
}

不知怎么的，它仍然无法正常工作。有人可以建议吗？谢谢！

Fiddle 这里：https://jsfiddle.net/xrp1h592/3/

Answer 1

.animate-show-hide.ng-hide-remove {
  left: 100%;
  position: relative;
}

.animate-show-hide.ng-hide-remove-active {
  left: 0;
}

.animate-show-hide.ng-hide-add {
  left: 0%;
  position: relative;
}

.animate-show-hide.ng-hide-add-active {
  left:100%;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: ease-in-out 300ms;
}

使用 ng-hide-add 和 ng-hide-remove 解决了这个问题。使用 "ease-in-out" 而不是 "linear" 会使它更平滑。

Plunkr link 此处： https://plnkr.co/edit/FeX0hG6nXnVz4h3H9oow?p=preview

AngularJS 从 1.1.5 到 1.5.1 的动画幻灯片问题

AngularJS animation from 1.1.5 to 1.5.1 slide in issues

angularjs

ng-animate