Question

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

即首先显示某个文字..然后隐藏（动画）..然后显示另一段文字......然后隐藏它......依此类推......

有点像幻灯片放映。

遵循AngularJS课程中的示例：

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

我已将我的CSS设置如下：＆＃39;

.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

我还需要添加其他类吗？

Answer 1

您缺少ng-animate

http://plnkr.co/edit/AwEToSEnSYiZePF5KhO9?p=preview

你必须添加cdn并像这样注入app

['ui.bootstrap', 'ngAnimate']

不是100％确定你对你的css有什么影响，但我猜你将不得不稍微调整一下，但这会让角动画部分为你工作。

使用ng-hide动画创建一个简单的幻灯片放映效果

1 个答案: