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

Posted 2023-03-06

【中文标题】淡入进入（从右到中）和离开（从中到左）

【英文标题】：Fade in enter (from right to center) and leave (from center to left)

【发布时间】：2017-11-03 20:29:27

【问题描述】：

我有一个居中的文本。它每 4 秒更换一次。 我希望在显示文本时：它将从右侧（不透明度 = 0）到中心（不透明度 = 1）， 当文本被隐藏时，它会从中心（opacity=1）向左（opacity=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

任何帮助表示赞赏！

【问题讨论】：

你对 ng-animate 没有依赖。

【参考方案1】：

你应该使用 webkit 动画。你可以在https://www.w3schools.com/css/css3_animations.asp找到更多信息

【参考方案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' );

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