AngularJS 带有淡入淡出动画的 ng-show

Question

我是 ngAnimate 的新手，我正在尝试完成一些非常简单的事情。

在单击按钮时显示 div1 并隐藏 div2（我设法做到了）。并在 div leaves/shows 时显示淡入淡出动画（我没做到）

而且我不想在 leaves/shows.

时同时显示两个 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); */
}

谢谢

Answer 1

在你的代码中

 <div class="box" ng-show="test.showBoxOne">

您还没有将第一盒 class 提供给 div，您在其中应用了动画

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

更正为：

     <div class="box box-one" ng-show="!test.showBoxOne">

这是更新后的 fiddle Your FIDDLE

Answer 2

我认为这应该是解决方案。

因为我们正在使用 ng-show，所以我们应该包含适当的 CSS。此外，您不能对两个 div 具有相同的条件，因此 ng-show 之一将是

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

    </div>

JSFiddle Demo

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;
}

希望这能解决您的问题！

AngularJS 带有淡入淡出动画的 ng-show

AngularJS ng-show with fade animation

animation

angularjs

ng-animate

ng-show