使用 ng-class 更改类时,角度动画不适用于 ng-show

Posted

技术标签:

【中文标题】使用 ng-class 更改类时,角度动画不适用于 ng-show【英文标题】:angular animations not working for ng-show when changing class using ng-class 【发布时间】:2017-09-19 13:44:55 【问题描述】:

我想使用 ng-show 和动画为无序列表中包含的一些对象创建一个滑块。当物体向一个方向滑动时,我可以很好地工作。

但是,当我希望用户能够向左或向右滑动对象时,使用 ng-class 更改类,动画不再起作用。

左/右大小写的html是:

<div class="slide-holder">
  <ul class="slide-list">
    <li class="slide-object" ng-show="directionElement == 0" ng-class="'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'">
      Hello There 1! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 1" ng-class="'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'">
      Hello There 2! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 2" ng-class="'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'">
      Hello There 3! How are you?</li>
    <li class="slide-object" ng-show="directionElement == 3" ng-class="'slide-object-left': direction === 'left', 'slide-object-right': direction === 'right'">
      Hello There 4! How are you?</li>
  </ul>
</div>

控制器中改变方向的功能有:

$scope.left = function() 
  $scope.direction === 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
;

$scope.right = function() 
  $scope.direction === 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
;

过渡 css 如下所示:

.slide-object-left.ng-hide-add,
.slide-object-left.ng-hide-remove 
  -webkit-transition:0.5s linear all;
  -moz-transition:0.5s linear all;
  -o-transition:0.5s linear all;
  transition:0.5s linear all;

  position:absolute;


.slide-object-left.ng-hide-add 
  left:100%;


.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active 
  left:0;


.slide-object-left.ng-hide-remove.ng-hide-remove-active 
  left:-100%;

我创建了一个 plnkr 来显示这两种情况:http://plnkr.co/edit/sh0uCAPZiCne4Y5ynFQ2?p=preview

编辑 1: 根据 Theoretisch 的回答,我已更新 plnkr 以修复控制器中导致方向切换故障的“===”错误。然而,主要的 ng 类问题和动画问题仍然存在。这是更新plnkr:http://plnkr.co/edit/lv1BBFjRoOmenTv7IBeC?p=preview

【问题讨论】:

【参考方案1】:

动画不工作的原因是因为===在你的控制器的功能中。

您应该只使用= 而不是===,因为您不想将$scope.direction 与您的字符串进行比较。

$scope.left = function() 
  $scope.direction = 'left'
  if($scope.directionElement > 0)
    $scope.directionElement = $scope.directionElement - 1;
;

$scope.right = function() 
  $scope.direction = 'right'
  if($scope.directionElement < 3)
  $scope.directionElement = $scope.directionElement + 1;
;

现在动画又开始了。 但是如果你想要一个好的和正确的动画,还有更多的事情要做。 其中一个是改变你的CSS。 如果您放慢动画速度,您会看到错误的slide-object 被动画化了。

只需更改它以更正它:

.slide-object-left.ng-hide-add 
  right:-100%;


.slide-object-left.ng-hide-remove,
.slide-object-left.ng-hide-add.ng-hide-add-active 
  right:0;


.slide-object-left.ng-hide-remove.ng-hide-remove-active 
  right:100%;


.slide-object-right.ng-hide-add 
  left:-100%;


.slide-object-right.ng-hide-remove,
.slide-object-right.ng-hide-add.ng-hide-add-active 
  left:0%;


.slide-object-right.ng-hide-remove.ng-hide-remove-active 
  left:100%;

我将right 切换为left 并另外更改了代数符号。 您可以通过我的更改找到 plunk HERE

编辑: 我不确定为什么动画如此错误。我认为这是因为ng-class。 我删除了它并编辑了你的ng-show。 您可以看到编辑后的 ​​Plunk HERE。 这不是最好的解决方案,但我希望它现在可以解决您的问题。 (也许你可以用THIS fiddle 改进它)

【讨论】:

嗨,theoretisch - '===' 事情完美!不敢相信我没有发现——盯着它看了好几个星期。您在 plnkr 中所做的 CSS 更改似乎不起作用。当您第一次单击底部的右/左时,它会显示一些奇怪的行为 - 您认为发生了什么? css应该可以工作,但我不知道为什么第一次点击会有错误。我认为它与范围有关,但我不确定。我仍在努力解决这个问题...但我现在没有解决方案... @TomO'Brien 我添加了一个更好的版本。现在动画可以工作了。 我想海报希望项目 1 滑出,项目 2 进入视野。当前的行为很奇怪,第 1 项消失,第 2 项滑开然后重新出现在开始 如果您将转换速度减慢到 5 秒,您可以准确地看到问题所在 - 不要认为最后的 plunk 已经完全解决了它。非常奇怪的行为。

以上是关于使用 ng-class 更改类时,角度动画不适用于 ng-show的主要内容,如果未能解决你的问题,请参考以下文章

带有 ng-class 指令的 ng-animate

动画不适用于 SwiftUI 视图状态更改

(更改)不适用于角度 5 中的 select2

css 过渡动画不适用于 svg 路径的“d”属性更改

在子元素中添加/删除类时的 CSS3 过渡动画

当类更改时,ng-class 会在 AngularJs 视图中更新 ng-repeat 中的所有项目