AngularJS - 使用更改范围变量设置动画div

Question

我是棱角分明的新人。我想使用ng-click元素在ng-repeat元素上设置div主体的动画。这是我到目前为止所尝试过的。

app.js

var app = angular.module( 'app', [] );

app.controller('appController', function($scope) {

    $scope.items = [
  {"id": "id1", "name": "Name 1"},
  {"id": "id2", "name": "Name 2"},
  {"id": "id3", "name": "Name 3"}
  ];

  $scope.selectedStyle = {"background-color": "blue", "color": "white"};
  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.selectedItem = item;
  }

});

app.html

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body">
    {{selectedItem.name}}
  </div>
</div>

我想要做的是将item-body div的淡入过渡效果添加为更改项目。我在网上搜索，但似乎无法找到解决方案。请帮忙。

JSFiddle - https://jsfiddle.net/lpsandaruwan/ot45qdno/14/

Answer 1

动画项目本身

您可以通过使用 angular 向所选元素添加类，并使用 css过渡管理过渡来实现此目的。

这样，就不需要$scope.selectedStyle。我们将在css中管理它。

所以，流程就是这样：

1. 当用户点击时，有角度的会为点击的元素添加selected类。
类item的
2. css过渡将为您处理颜色变化（包括select和deselect）。

以下是代码：

＆＃13;
＆＃13;
var app = angular.module('app', []);

app.controller('appController', function($scope) {

  $scope.items = [{
    "id": "id1",
    "name": "Name 1"
  }, {
    "id": "id2",
    "name": "Name 2"
  }, {
    "id": "id3",
    "name": "Name 3"
  }];

  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.selectedItem = item;
  }

});
＆＃13;
.item-body {
  color: red;
}
.item {
  cursor: pointer;
  transition: all 250ms linear;
}
.item.selected {
  cursor: default;
  background-color: blue;
  color: white;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body">
    {{selectedItem.name}}
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

动画item-body

如果要在更改时为item-body设置动画，可以使用简单的超时来添加和删除类。

此外，您应该知道可以使用一些模块来实现此目标（例如this）。

以下是我的建议：

1. 添加一个标志，让item-body元素知道它需要隐藏和显示
2. 将该标志挂钩到类
3. 使该标志隐藏并显示该元素，类似于我们之前所做的transition
＆＃13;
＆＃13;
var app = angular.module('app', []);

app.controller('appController', function($scope, $timeout) {

  $scope.items = [{
    "id": "id1",
    "name": "Name 1"
  }, {
    "id": "id2",
    "name": "Name 2"
  }, {
    "id": "id3",
    "name": "Name 3"
  }];

  $scope.selectedItem = $scope.items[0];

  $scope.selectItem = function(item) {
    $scope.changeIsOn = true;
    $timeout(function() {
      $scope.selectedItem = item;
      $scope.changeIsOn = false;
    }, 250);

  }

});
＆＃13;
.item-body {
  color: red;
  transition: opacity 250ms linear;
}
.item-body.changing {
  opacity: 0;
}
.item {
  cursor: pointer;
  transition: all 250ms linear;
}
.item.selected {
  cursor: default;
  background-color: blue;
  color: white;
}
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" class="item" ng-class="{ 'selected': selectedItem === item }">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body" ng-class="{ 'changing': changeIsOn }">
    {{selectedItem.name}}
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

使用ng-class，您可以根据范围值有选择地应用动画类，例如：

.storyboard

Answer 3

您可以创建一个自定义指令，将指定的模型监视到您的item-body div，当值更改时，您可以使用angular的动画服务。

在你的html视图中，我已经添加了我的自定义指令

的更改通知

<div ng-app="app"  ng-controller="appController">
  <table class=table>
    <tbody>
      <tr ng-repeat="item in items" ng-click="selectItem(item)" ng-style="item.id === selectedItem.id && selectedStyle">
        <td>
          {{item.id}}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="item-body" my-dir ng-model="myValue">
    {{selectedItem.name}}
  </div>
</div>

请记住下载angular-animate.js并将其添加到您的解决方案中。重要的一部分是注入一个＆＃39; ngAnimate＆＃39;依赖于您的模块并添加您的自定义指令，如下所示。

在此之前添加一个类样式

 .myClass
    {
         background-color: red;
          transition: all 1s;
          -webkit-transition: all 1s ease-in-out;
    }

请注意，我正在应用$ watch方法来监视变量

var app = angular.module('app', ['ngAnimate']);

        app.controller('appController', function ($scope) {

                        $scope.items = [
              { "id": "id1", "name": "Name 1" },
              { "id": "id2", "name": "Name 2" },
              { "id": "id3", "name": "Name 3" }
              ];

            $scope.selectedStyle = { "background-color": "blue", "color": "white" };
            $scope.selectedItem = $scope.items[0];

            $scope.selectItem = function (item) {
                $scope.selectedItem = item;
                $scope.myValue = item.name;

            }

        }).directive("myDir", function ($animate, $timeout) {
            return function (scope, element, attrs) {
                scope.$watch('myValue', function (newValue, oldValue) {

                    if (newValue != oldValue) {

                        $animate.addClass(element, "myClass").then(function () {
                            $timeout(function () { $animate.removeClass(element, "myClass"); });
                        });
                    }

                },true);
            }
        });