BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] AngularJSでng-hideを使用して要素をフェードアウトさせる方法は？

2022-02-16 12:16:07

質問

現在、私のコントローラでは、ブール値の条件に従って要素を表示/非表示にすることができます。条件を満たした場合、即座に要素を隠すのではなく、フェードアウトさせるにはどうしたらよいでしょうか？ 

<div id='conversion-image' ng-hide="pages.length > 0">
    generating pages...
    <br />
    <img src='Images/ajax-loader-blue.gif' />
</div>

また、ngAnimateの依存関係もすでに含まれていますね。 

var app = angular.module("app", ["ngAnimate"]);

解決方法は？

CSSでできることや ng-animate を以下のようにします。 

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

.fade-out.ng-hide-add, .fade-out.ng-hide-remove {
  transition: all linear 0.5s;
}

.check-element {
  border: 1px solid black;
  opacity: 1;
  padding: 10px;
}

<head>
  <meta charset="UTF-8">
  <link href="animations.css" rel="stylesheet" type="text/css">
  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="//code.angularjs.org/snapshot/angular-animate.js"></script>      
</head>

<body ng-app="ngAnimate">
  Hide: <input type="checkbox" ng-model="checked" aria-label="Toggle ngHide"><br />
  <div class="check-element fade-out" ng-hide="checked">
    I fade out when your checkbox is checked.
  </div>
</body>

角型 ng-hide ドキュメント

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します