AngularJS ng-Show mit Fade-Animation

Ich bin neu in ngAnimate und ich versuche, etwas wirklich einfach zu erledige.AngularJS ng-Show mit Fade-Animation

anzeigen div1 und ausblenden div2 wenn eine Schaltfläche geklickt wird (ich es geschafft, das zu tun). Und zeige eine Fade-Animation, wenn ein div Blätter/Shows (ich schaffte das nicht)

Und ich möchte nicht beide divs zur gleichen Zeit zeigen, wenn es/Shows zeigt.

bereitete ich eine JSFIDDLE

Hier ist der Code

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

Vielen Dank im Voraus

Quelle

2017-09-05 DPF

denken Dies ist ich dies die Lösung sein sollte.

Weil wir ng-show verwenden, sollten wir die entsprechende CSS enthalten. Auch kann nicht Sie die gleiche Bedingung für beide divs haben, so eine der ng-show wird

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

    </div>

JSFiddle Demo

HTML sein:

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

Ich hoffe, dies löst Ihr Problem!

Quelle

2017-09-05 21:13:00

Vielen Dank, es funktioniert so, wie ich es wollte. Ich wusste nicht, Sie CSS für ng-hide verwenden musste, ist das Nützlich- – DPF

EDIT: Ich habe bemerkt, dass die ng-init es nicht funktioniert hat. Ich möchte zuerst zeigen, ohne klicken zu müssen, div1 Wissen Sie warum? – DPF

@DPF Die Variable 'test.showBoxOne' wurde nicht initialisiert! Kannst du meine Antwort noch einmal überprüfen? –

In Ihrem Code

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

Sie haben nicht schachtel einer Klasse in der div gegeben, in dem Sie Animation angewendet haben

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

Correct es als:

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

die aktualisierte Geige Your FIDDLE

Quelle

2017-09-05 21:08:05

AngularJS ng-Show mit Fade-Animation

Antwort

Verwandte Themen