不同的ng-switch动画

时间:2017-11-02 10:36:43

标签: javascript css angularjs

我在ng-switch上有一个简单的幻灯片动画。我想在动画第一次完成时有一个不同的动画。我怎么能这样做。这是我正在使用的课程:

.ngSwitchAnimation {
    position: absolute;
    width: 100%;
    height: 100%;
}
.ngSwitchAnimation.ng-enter,
.ngSwitchAnimation.ng-leave {
    -webkit-transition : 0.5s linear all;
    -moz-transition    : 0.5s linear all;
    -ms-transition     : 0.5s linear all;
    -o-transition      : 0.5s linear all;
    transition         : 0.5s linear all;
}

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

1 个答案:

答案 0 :(得分:0)

请看下面的示例,其中不透明度为0,放置一个状态,其中1个为oposite。

.animate-if {
  background:white;
  border:1px solid black;
  padding:10px;
}

.animate-if.ng-enter, .animate-if.ng-leave {
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}

.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
  opacity:0;
}

.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
  opacity:1;
}