Fatal编程技术网
  • javascript/
  • Javascript 如何在基于选定更改的视图中淡出/淡出？

Javascript 如何在基于选定更改的视图中淡出/淡出？

javascript angularjs

Javascript 如何在基于选定更改的视图中淡出/淡出？,javascript,angularjs,css-animations,Javascript,Angularjs,Css Animations,如果我们不介意公然违反MVC的话，这很简单，但自从我试图学习如何善用angular，我就一直在为这样一些无伤大雅的小事大惊小怪 我想要的就是DivThis应该在选择新事物时淡入淡出，然后使用新数据淡入 以下是html： <body ng-app="MyApp"> <div ng-controller="MyController as myCtrl"> <select ng-model="myCtrl.currentThing" ng-options="

如果我们不介意公然违反MVC的话，这很简单，但自从我试图学习如何善用angular，我就一直在为这样一些无伤大雅的小事大惊小怪

我想要的就是DivThis应该在选择新事物时淡入淡出，然后使用新数据淡入

以下是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>
还有砰的一声：

我尝试过使用ngAnimate使用CSS转换设置类的一系列不同方法，但基本问题似乎是模型会立即改变，因为它绑定到SELECT

有谁有好的策略吗？我更愿意让jQuery袖手旁观。也就是说，这里有一个jQuery plunk，它显示了所需的效果：

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

我制作了一个非常简单的指令示例，以说明如何执行该指令。该示例期望在控制器中创建名为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>
下面是一个使用过渡延迟和ng重复来获得所需效果的简单方法。这有点不完美，因为从无选择到选择的延迟等于转换延迟：

angular.moduleMyApp，['ngAnimate'] .controllerMyController，函数{ 这件事[{ 名字：第一件事， 数据：这是第一件事的数据 }, { 名字：第二件事， 数据：这是第二件事的数据 }, { 名字：第三件事， 数据：这是第三件事的数据 }]; this.currentThing=[]； } .制作动画{ 位置：绝对位置； 过渡：均为0.5s； } 。设置动画。ng-enter{ 不透明度：0； } .设置动画。ng-enter-active{ 不透明度：1.0； 过渡延迟：0.4s； -webkit转换延迟：0.4s； } .动画制作ng-LEFT{ 不透明度：1.0； } .设置动画。ng-LEFT-active{ 不透明度：0； } -选择一件事- {{thing.data}
看看这个问题和链接视频@isherwood您的链接和相应的视频使用了不推荐的方法。更新后的链接，试图为angular 1.2演示新的基于类的动画，提供了一种可怕的、非常非角度的方法，包括我们都试图避免的硬编码设置超时。Patrick，这是一个非常好的角度动画演示。我选择DTing的答案是因为它使用了首选的纯CSS方法。尽管如此，你仍然可以得到一张选票——我已经看到我的项目中有几个地方可以用你的来代替。太棒了！这是完美的——我在最后添加了一个默认状态来解释你所感知到的不完美。问：你认为这是因为过渡延迟吗？还是因为我们正在迭代1项或0项数组？鉴于angular的数据绑定，这个场景本身似乎不可避免地会导致某种形式的黑客行为，所以我说BRA-VO。谢谢虽然没有太多的过渡延迟，但感觉很不舒服，因为您正在使用repeat来触发enter和leave动画类。没问题。 
<div id="thisShouldFade" option-fader="currentThing.data">{{show.data}}</div>