Question

我正试图滑入div并从左到右滑出另一个。

<div class="moveleft" ng-switch="article">
    <div ng-switch-when="1">
    ...hi... 
    </div>

    <div ng-switch-when="2">
    ...bye...       
     </div>
</div>

我想在button点击时滑动

<button ng-click="changeori()">Hi</button>

在我的AngularJS文件中：

$scope.article = 1;
$scope.changeori = function() {
    $scope.article = $scope.article == 1 ? 2 : 1;
}

我的moveleft课程：

.moveleft, .moveright {
    transition: 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;
}

.moveleft.ng-enter {
   left: 100%;
}
.moveleft.ng-enter-active {
    left: 0;
}
.moveleft.ng-leave {
    left: 0;
}
.moveleft.ng-leave-active {
    left: -100%;
}

问题：点击按钮后，第一个div会在2秒后隐藏，第二个div会按预期点亮，但幻灯片的动画不会发生。

Answer 1

您可能正在使用ng-animate错误。

请参阅此working demo

2项（div）通过动画css响应如下

.item {
    position: absolute;
    top: 35px;
    bottom: 0;
    right: 0;
    left: 0;
    animation-duration: 0.30s;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 0.30s;
    -webkit-animation-timing-function: ease-in-out;
}

.item.ng-enter {
    animation-name: slideFromRight;
    -webkit-animation-name: slideFromRight;
}
.item.moveToLeft.ng-enter {
    animation-name: slideFromLeft;
    -webkit-animation-name: slideFromLeft;
}
.item.ng-leave {
    animation-name: slideFromLeft;
    animation-direction: reverse;
    -webkit-animation-name: slideFromLeft;
    -webkit-animation-direction: reverse;
}
.item.moveToLeft.ng-leave {
    animation-name: slideFromRight;
    animation-direction: reverse;
    -webkit-animation-name: slideFromRight;
    -webkit-animation-direction: reverse;
}

AngularJS幻灯片过渡

1 个答案: