如何根据 SELECT 更改淡出/淡入视图？答案

【问题标题】：How can I fade out/in a view based on a SELECT change?如何根据 SELECT 更改淡出/淡入视图？
【发布时间】：2015-06-11 09:00:04
【问题描述】：

如果我们不介意公然违反 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

【问题讨论】：

看看这个问题和链接的视频。 stackoverflow.com/questions/13083644/…
@isherwood 您的链接和相应的视频使用了已弃用的方法。 “更新”链接试图说明 angular 1.2 的基于类的较新动画，提供了一种可怕的、非常无角度的方法，以及我们都试图避免的硬编码 setTimeouts。

标签： javascript angularjs css-animations

【解决方案1】：

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

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>

【讨论】：

优秀！这非常有效——我在最后添加了 div#defaultState 来解释你认为的“不完美”。问题：您是否因为转换延迟而认为这种“hacky”？还是因为我们正在迭代一个 1 项（或 0 项）数组？鉴于 Angular 的数据绑定，场景本身似乎不可避免地会导致某种形式的骇客，所以我说 BRA-VO。谢谢！
没有太多的过渡延迟，但感觉很hacky，因为您使用重复来触发进入和离开动画类。没问题。

【解决方案2】：

通常当你想做一些影响 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>

【讨论】：

Patrick，这是一个非常好的角度化 js 动画插图。我选择了 DTing 的答案，因为它使用了首选的纯 CSS 方法。不过，你仍然会得到支持——我已经在我的项目中看到了几个地方，我最终可以改用你的。