使用 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的主要内容,如果未能解决你的问题,请参考以下文章