Question

我有一个div，其中显示了一些数据：

div.movie_details
    div.movie_details_container
        span {{ movieDetail.title }}
        span {{ movieDetail.overview }}

我还有一个按钮，用于更改已显示的信息：

ng-click="toggleRow(movie)

toggleRow函数：

$scope.toggleRow = function(movie){

    $scope.movieDetail = movie;
};

因此，当用户点击按钮时，toggleRow函数将触发并将影片对象作为参数发送给该函数。然后，该功能会更改范围，从而更改视图中显示的信息。工作正常。

我的问题是，当div.movie_details_container中的信息发生变化时，我想制作过渡动画。但我无法确定正确的行动顺序。

我使用项目的简化版本制作了一个plunkr：https://plnkr.co/edit/wlmVaxVhax0b07cvXXld?p=preview因此，当用户点击标题时，更改非常突然。我想要一个很好的淡入/淡出过渡。

Answer 1

你可以使用css动画来做你想做的事。 Angular会将ng-hide类添加到隐藏ng-show或ng-hide的div中，您可以利用它。这是一个简单而极简主义的演示：

<强> CSS：

.group {
  border: 1px solid green;
  margin-bottom: 5px;
  padding: 5px;
}

.detail {
  border: 1px solid black;
  padding: 5px;
  animation: 0.5s fadeInAnimation ease;
}

.detail.ng-hide {
  height: 0;
  opacity: 0;
}

@keyframes fadeInAnimation {
  0% {
    height: 0;
    opacity: 0;
    display: none;
  }

  100% {
    height: auto;
    opacity: 1;
    display: block;
  }
}

Plunker demo

Answer 2

您可以使用ngAnimate：

在文件中包含angular-animate.js：

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>

angular-animate.js应低于angular.min.js。

通过将模块添加为依赖模块来加载模块：
```
angular.module('app', ['ngAnimate']);
```

添加样式：

.detail{
    border: 1px solid black;
    padding: 5px;
    transition: all linear 0.5s;
}
.detail.ng-hide {
    opacity: 0;
}

它的工作：https://plnkr.co/edit/qrS8EBg8jitcqBqT3TqW?p=preview

详细了解ngAnimate：https://docs.angularjs.org/api/ngAnimate

点击时div中的角动画

2 个答案: