BinaryDevelop
  1. ホーム
  2. angularjs

[解決済み] AngularJSのng-showとフェードアニメーション

2022-02-06 17:08:38

質問

私は ngAnimate の初心者ですが、非常に簡単なことを成し遂げようとしています。

ボタンがクリックされたらdiv1を表示し、div2を隠す（なんとかできました）。そして、divが離れる/表示されるときにフェードアニメーションを表示する（私はそれを行うために管理されませんでした）。

また、離脱/表示時に両方のdivを同時に表示させたくないのですが。

を用意しました。 JSFIDDLE

以下はそのコードです。

HTML 

    <body ng-controller="AniCtrl as test" >
<div ng-app="app" ng-init="visibleDiv='div1'">

    <md-button ng-click="visibleDiv='div1';test.showBoxOne = !test.showBoxOne">Div 1</md-button>
    <md-button ng-click="visibleDiv='div2';test.showBoxOne = !test.showBoxOne">Div 2</md-button>

  <section>
    <div ng-show="visibleDiv == 'div1'" flex>
     <div class="box" ng-show="test.showBoxOne">
          <p>This is Div 1</p>
     </div>
    </div>
    <div ng-show="visibleDiv == 'div2'" id="div2" flex>
     <div class="box" ng-show="test.showBoxOne">
          <p>This is Div 2</p>
          </div>

    </div>
  </section>
</div>
</body>

JS 

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

app.controller('AniCtrl', AniCtrl);

function AniCtrl() {
  var self = this;

  self.showBoxOne = false;
  self.showBoxTwo = false;


}

CSS 

    .box{
  background-color:black;
  color:white;
  border:1px solid red;
}

.box-one {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.box-one.ng-hide {
  opacity:0;
  /* transform: scale(0.8); */
}

ありがとうございました

解決方法は？

これが解決策になると思います。

を使用しているため ng-show には、適切なCSSを記述する必要があります。また、両方の div に同じ条件を設定することはできないので、片方の div の ng-show になります。 

<div class="box fade" ng-show="!test.showBoxOne">
          <p>This is Div 2</p>
          </div>

    </div>

JSFiddleデモ

HTMLです。 

<div ng-app="sandbox" ng-init="visibleDiv='div1';test.showBoxOne=true;">
  <div layout="row" flex layout-align="center">
    <md-button ng-click="visibleDiv='div1';test.showBoxOne = !test.showBoxOne">Div 1</md-button>
    <md-button ng-click="visibleDiv='div2';test.showBoxOne = !test.showBoxOne">Div 2</md-button>
  </div>
  <section layout="row">
    <div class="" ng-show="visibleDiv == 'div1'" flex>
     <div class="box fade" ng-show="test.showBoxOne">
          <p>This is Div 1</p>
     </div>
    </div>
    <div class="" ng-show="visibleDiv == 'div2'" id="div2" flex>
     <div class="box fade" ng-show="!test.showBoxOne">
          <p>This is Div 2</p>
          </div>

    </div>
  </section>
</div>

CSSです。 

.box{
  background-color:black;
  color:white;
  border:1px solid red;
}
.fade {
    transition: all linear 1s;
    opacity: 1;
}

.fade.ng-hide {
    opacity: 0;
}
.ng-hide {
    opacity: 0;
    transition: none 0;
}

これで、あなたの問題が解決することを願っています

関連

最新

おすすめ

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