我如何根据 SELECT 更改使视图淡出 out/in？

Question

如果我们不介意公然违反 MVC，这很容易做到，但由于我正在努力学习与 angular 相处融洽，所以我一直在无伤大雅的小事上焦头烂额像这样。

我想要的只是 div#thisShouldFade 在选择新事物时淡出，然后随着新数据淡入。

这是 html:

<body ng-app="MyApp">
  <div ng-controller="MyController as myCtrl">

    <select ng-model="myCtrl.currentThing" ng-options="object.name for object in myCtrl.things">
      <option value="">--choose a thing--</option>
    </select>

    <div id="thisShouldFade">{{myCtrl.currentThing.data}}</div>

  </div>
</body>

和 javascript:

  angular.module("MyApp", [])

  .controller("MyController", function(){
    this.things = [
      { name: "Thing One",   data: "This is the data for thing one" },  
      { name: "Thing Two",   data: "This is the data for thing two" },  
      { name: "Thing Three", data: "This is the data for thing three" }
    ];

    this.currentThing = null;
  })

和笨蛋：

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

我已经尝试了很多不同的方法，使用 ngAnimate 来设置类和 CSS 转换，但根本问题似乎是模型正在立即改变，因为它绑定到 SELECT.

谁有好的 angular-iffic 策略？我宁愿让 jQuery 站在场边。也就是说，这里有一个显示所需效果的 jQuery plunk：

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

Answer 1

通常当您想做一些影响 DOM 的事情时，您会创建一个指令。

我做了一个非常简单的指令示例来展示它是如何完成的； http://jsfiddle.net/9ydqvzms/。该示例期望在控制器中创建一个名为 show 的变量

$scope.show = {
    data: null
};

当然这可以通过指令中的适当范围或某种回调来解决。

app.directive('optionFader', function () {
    return {
        link: function link(scope, element, attrs) {
            scope.$watch(attrs.optionFader, function (newValue, oldValue) {
                if (oldValue == newValue && newValue === undefined) return;

                var qelem = $(element);
                if (!scope.show.data) {
                    // if we have no previous value, fade in directly
                    qelem.fadeOut(0);
                    scope.show.data = newValue;
                    qelem.fadeIn(1000);
                } else {
                    qelem.fadeOut(1000, function () {
                        if (newValue) {
                            scope.show.data = newValue;
                            // we are outside of the digest cycle, so apply
                            scope.$apply();
                        }
                        qelem.fadeIn(1000);
                    });
                }
            });
        }
    };
});

基本上指令会监听某些值的变化，在下面的示例中设置为 currentThing.data，然后设置另一个范围值 show.data，这是显示的实际值。

然后您可以使用属性

将此应用到您的HTML

<div id="thisShouldFade" option-fader="currentThing.data">{{show.data}}</div>

Answer 2

这是一种使用过渡延迟和 ng-repeat 获得所需效果的 hacky 方法。它有些不完美，因为从无选择到选择等于转换延迟的延迟：

angular.module("MyApp", ['ngAnimate'])

.controller("MyController", function() {
  this.things = [{
    name: "Thing One",
    data: "This is the data for thing one"
  }, {
    name: "Thing Two",
    data: "This is the data for thing two"
  }, {
    name: "Thing Three",
    data: "This is the data for thing three"
  }];

  this.currentThing = [];
})

.animate {
  position: absolute;
  transition: all 0.5s;
}
.animate.ng-enter {
  opacity: 0;
}
.animate.ng-enter-active {
  opacity: 1.0;
  transition-delay: 0.4s;
  -webkit-transition-delay: 0.4s;
}
.animate.ng-leave {
  opacity: 1.0;
}
.animate.ng-leave-active {
  opacity: 0;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-animate.min.js"></script>

<body ng-app="MyApp">
  <div ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.currentThing[0]" ng-options="object.name for object in myCtrl.things">
      <option value="">--choose a thing--</option>
    </select>
    <div ng-repeat="thing in myCtrl.currentThing" class="animate">{{thing.data}}</div>
  </div>
</body>

我如何根据 SELECT 更改使视图淡出 out/in？

How can I fade out/in a view based on a SELECT change?

javascript

css-animations

angularjs