Angularjs 使用ng隐藏动画创建简单的幻灯片放映效果

在我的应用程序中，我试图创建一个类似幻灯片放映的效果

i、 首先显示一段文字。。然后隐藏（动画）…然后显示另一段文本。。。然后把它藏起来。。等等

有点像幻灯片放映

以下是AngularJS课程中的示例：

http://plnkr.co/edit/DCvvNxnitHpcAowKKSvI?p=info

我的css设置如下：'

.part1 {
  background-color: blue;
  opacity: 1;
  height: 200px;
}

.part1.ng-hide-add.ng-hide-add-active,
.part1.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: opacity ease-in 2s;
  transition: opacity ease-in 2s;
}

.part1.ng-hide {
  opacity: 0;
}

.part2 {
  background-color: red;
  opacity: 1;
    height: 200px;
}


.part2.ng-hide-add.ng-hide-add-active,
.part2.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: opacity linear 0.5s;
  transition: opacity linear 0.5s;
}

.part2.ng-hide {
  opacity: 0;
}

但是，在part1和part2之间没有动画发生

这里有一个plnkr：

http://plnkr.co/edit/hrxtvxIIAysEw1iF2DLn?p=info

---

是否还有其他类需要添加？

您缺少ng animate

你必须添加cdn并像这样注入到应用程序中

['ui.bootstrap', 'ngAnimate']

---

无法100%确定css想要什么效果，但我猜您需要稍微调整一下，但这将使角度动画部分适合您。

您没有包括ng动画