Javascript AngularJS滑动过渡

我试着从左向右滑入一个div，再滑出另一个div

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

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

在我的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按预期在单击时出现，但幻灯片的动画没有出现。

您可能使用的ng动画错误

看到这个了吗

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;
}

---

如果可能的话，制作一把小提琴

.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;
}