如何为 ngShow/ngHide 制作特定的动画 (ngAnimation)

Question

我完成了这节课：https://docs.angularjs.org/api/ngAnimate。还好它能正常工作（我使用了基于 CSS 的动画中 link 的示例）但我遇到的问题是，所有使用 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 对象。这样做的原因最终是我想创建一个 bootstrap 表单（由 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)

How to make animation for ngShow/ngHide specific (ngAnimation)

javascript

animation

angularjs

ng-animate