Css 使用ng类更改类时,角度动画不适用于ng显示
我想使用ng show和动画为无序列表中包含的某些对象创建一个滑块。当物体在一个方向上滑动时,我能很好地工作 但是,当我希望用户能够使用ng类更改类向左或向右滑动对象时,动画将不再工作 左/右案例的html为:Css 使用ng类更改类时,角度动画不适用于ng显示,css,angularjs,css-transitions,ng-animate,ng-show,Css,Angularjs,Css Transitions,Ng Animate,Ng Show,我想使用ng show和动画为无序列表中包含的某些对象创建一个滑块。当物体在一个方向上滑动时,我能很好地工作 但是,当我希望用户能够使用ng类更改类向左或向右滑动对象时,动画将不再工作 左/右案例的html为: <div class="slide-holder"> <ul class="slide-list"> <li class="slide-object" ng-show="directionElement == 0" ng-class="{'sli
<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>
我创建了一个plnkr来显示这两种情况:
编辑1:根据Theoretisch的回答,我已更新plnkr,以修复控制器中导致方向切换故障的“==”错误。然而,主要的ng类问题和动画问题仍然存在。以下是更新plnkr:动画不工作的原因是控制器功能中的
=
您应该只使用=
而不是=
,因为您不想将$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;
};
我将右
切换到左
,并额外更改了代数符号。
您可以找到带有我的更改的plunk
编辑:
我不知道为什么动画是如此有缺陷。我认为这是因为ng类
。
我删除了它并编辑了你的ng节目
。
您可以看到已编辑的Plunk。
这不是最好的解决办法,但我希望现在它能解决你的问题。
(也许你可以用小提琴来改进它)嗨,theoretisch——“===”这个东西工作得很好!真不敢相信我居然没发现——我盯着它看了好几个星期。您在plnkr中所做的CSS更改似乎不起作用。第一次单击底部的右/左时,它会显示一些奇怪的行为-你认为是怎么回事?css应该可以工作,但我不知道为什么第一次单击时会出现错误。我想这是有范围的,但我不确定。我还在努力解决这个问题。。。但我现在没有解决办法…@TomO'Brien我添加了一个更好的版本。现在动画开始工作了。我想象海报希望项目1滑出,项目2进入视野。当前的行为很奇怪,第1项消失,第2项滑落,然后在开始时重新出现。如果你将转换速度减慢到5秒,你可以清楚地看到出了什么问题-不要认为最后一次撞击已经完全修复了它。非常奇怪的行为。
.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%;
}
$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;
};
.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%;
}