淡入（从右到中）和离开（从中到左）

Question

我有一个居中的文本。它每 4 秒更换一次。我希望在显示文本时：它会从右边（不透明度=0）到中心（不透明度=1），当文本被隐藏时，它会从中心（不透明度=1）向左（不透明度=0）移动。

这是我试过的：

.fade.ng-enter {
  transition:0.5s ease-out all;
  opacity:0;
}

.fade.ng-enter.ng-enter-active {
  opacity:1;
}

.fade.ng-leave {
  transition:0.5s linear all;
  opacity:1;
}
.fade.ng-leave.ng-leave-active {
  opacity:0;
}

这是我的代码笔： https://codepen.io/anon/pen/jwNomv

感谢任何帮助！

Answer 1

你应该使用webkit动画。您可以在 https://www.w3schools.com/css/css3_animations.asp

找到更多信息

Answer 2

您不依赖 ng-animate。即使你这样做了，它也不会起作用，因为 ng-animate 支持像 ng-view、ng-show、ng-hide、ng-repeat 这样的指令。

您所做的只是更改可见文本。您需要使用这些指令中的任何一个来使 ng-animate 工作。

相反，如果你想让它工作，你必须自己添加这些类，它可以使用 JQlite API，你可以使用 addClass() , removeClass() 和 toggleClass().

var element = angular.element( 'id' );

/** Use timeouts to clearly decide when an element at which state. */
element.addClass( 'ng-enter' );

另一个使用关键帧的解决方案已经实现 here。

淡入（从右到中）和离开（从中到左）

Fade in enter (from right to center) and leave (from center to left)

css

angularjs

ng-animate