AngularJS ng-show with fade animation

我是ngAnimate的新手，我試圖去體會一些非常簡單的東西。AngularJS ng-show with fade animation

單擊按鈕時顯示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>

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); */ 
}

提前

來源

2017-09-05 DPF

我想這應該是解決方案。

因爲我們使用的是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; 
}

我希望這可以解決您的問題！

來源

2017-09-05 21:13:00

非常感謝，它正常工作就像我想要的一樣。我不知道你必須使用CSS隱式，這很有用 - – DPF

編輯：我只是注意到，那ng-init它不工作。我想首先展示，無需點擊，div1 你知道爲什麼嗎？ – DPF

@DPF變量'test.showBoxOne'未初始化！你能重新檢查我的答案嗎？ –

感謝您的代碼

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

你還沒盒一類的div中，已應用的動畫

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

糾正它：

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

這是更新的小提琴Your FIDDLE

來源

2017-09-05 21:08:05

AngularJS ng-show with fade animation

回答

相關問題