web-dev-qa-db-ja.com

アンギュラーjsチェーンフェードイン/フェードアウト遷移

このページの下部にある公式の表示/非表示遷移の例を見てきました... http://docs.angularjs.org/api/ng.directive:ngShow

私はそれを修正して、1つのdivから他のdivへの見えないフェードトランジション（遷移：不透明度0.5秒のイーズインアウト）を取得しようとしました他のdivがフェードインし始める前に。

Jqueryでは、次のように簡単になります。

$("#divA").fadeOut(function() { $("divB").fadeIn(); });

単一のモデルを使用して遷移をトリガーする単一のモデルを使用するリンクされた例に関して、角度でこれを達成するための最良の方法に関するアドバイスはありますか？

angularjscss-transitionsfadeng-animate
15
user2754486

ngShow の例を使用して、angular1.2.0-rc.3に基づいて次の jsfiddle を作成しました。

Htmlコード：

<div ng-app="App">
  Click me: <input type="checkbox" ng-model="checked"><br/>
     <div class="check-element animate-show" ng-show="checked">
      <span class="icon-thumbs-up"></span> I show up when your checkbox is checked.
    </div>
    <div class="check-element animate-show" ng-hide="checked">
      <span class="icon-thumbs-down"></span> I hide when your checkbox is checked.
    </div>
</div>

CSSスタイル

.animate-show.ng-hide-add, 
.animate-show.ng-hide-remove {
  -webkit-transition:all linear 0.5s;
  -moz-transition:all linear 0.5s;
  -o-transition:all linear 0.5s;
  transition:all linear 0.5s;
  display:block!important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

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

最後に、JavaScriptコード。ライブラリangular.jsおよびangular-animate.jsを含めることを忘れないでください

angular.module('App', ['ngAnimate']);

私はそれがあなたを助けることを願っています;）

11
Adrian

ngAnimateモジュール を使用すると、-transition-delayディレクティブ：

Plunker

[〜＃〜] html [〜＃〜]

<body ng-app="ngAnimate">
  Click me: <input type="checkbox" ng-model="checked">
  <br/>
  <img ng-show="checked" src="img1.jpg">
  <img ng-hide="checked" src="img2.jpg">
</body>

[〜＃〜] css [〜＃〜]

img {
  position: absolute;
}

.ng-hide-add-active {
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
}

.ng-hide-remove-active {
  display: block!important;
  -webkit-transition: 0.5s linear all;
  transition: 0.5s linear all;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.ng-hide {
  opacity: 0;
}
9
rphv

Ng-show（ http://docs.angularjs.org/api/ngAnimate ）と組み合わせてng-animateを使用できます。Angular 1.1.4または、モデルがチェックされたときにshowクラスを適用し、ショーとアニメーションをクラスに適用します。

<label><input type="checkbox" ng-model="showElement" />Show div</label>
<div ng-class="{show: showElement}"></div>
0
eddiec