Question

我接受了这一课：https://docs.angularjs.org/api/ngAnimate。这是好事（我使用了来自基于CSS的动画的以下链接中的示例），但我遇到的问题是，所有使用ng-show / ng-hide的DOM似乎都受到动画的影响。我想只有一个元素受动画影响，如下例所示：

CSS：

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="first-name"></div>
<div class='col-xs-12 col-ms-12 col-sm-12 col-md-12 col-lg-12 fade-in-out' ng-show='checked'><input type="text" name="last-name"></div>

JS：

$timeout(function () {
    scope.checked = true;
}, 2000);

代码正在运行，但所有使用ng-hide / ng-show的其他DOM也会受到影响，我想仅针对上述代码或仅针对上述html对象。原因是我最终想创建一个引导形式（由js动态创建），它将淡入。由于这是动态创建的 - 我不能只将两个输入组合成一个div（对此的解释也是如此）长）。有没有办法做到这一点？我是这项技术的新手。

Answer 1

对不同的部分使用不同的ng-show表达式。

<div ng-app="myApp" controller="myVm">

    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked'>
        <input type="text" name="last-name">
    </div>

    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="first-name">
    </div>
    <div class='fade-in-out' ng-show='!checked2'>
        <input type="text" name="last-name">
    </div>

    <input type="checkbox" ng-model="checked">
    <input type="checkbox" ng-model="checked2">
</div>

JS

angular.module("myApp", ['ngAnimate']);

angular.module("myApp").controller("myVm", function($scope) {
});

CSS

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

如何制作特定于ngShow / ngHide的动画（ngAnimation）

1 个答案: