2014-06-27 5 views
1

J'ai créé une simple fonction ng-clic qui masque et affiche un DIV.AngularJS - Effet de glissement On ng-click

Cependant, plutôt et simplement en apparaissant et en disparaissant, est-ce que angulaire a la capacité de donner un effet de glissement?

Voici un plunkr: http://plnkr.co/edit/jbHidL3oOQvi4RBCkJIF?p=preview

HTML:

<div class="grid-wrap"> 
    <div class="grid-col one-third"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
    <a href="#" class="link" ng-click="showMe=!showMe">Show the slidy section</a> 
    </div> 


    <div class="grid-col two-thirds" ng-show="showMe"> 
    My hidden section that i want to slide out 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p> 
    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis irure dolor in repr</p> 

    </div> 
</div> 

Répondre

1

Vous devriez avoir une bonne lecture à propos de ng-Animate (il être injecté dans votre application - quelque chose de beaucoup de ppl oublier) puis vous pouvez jeter un coup d'oeil ici http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation

un des exemples bien conçus de ce ng-Animer peut faire

Google CDN angularjs-animate.min.js

+0

ive avait un oeil sur ng-animate, idéalement je voudrais y parvenir sans avoir à importer plus de bibliothèques JS. –

+1

C'est faisable, vous pouvez utiliser 'ng-class' et changer de classe selon ce que vous voulez faire c'est-à-dire la classe' hide-ya-wife' pour animer la dissimulation ou 'show-me-the-money' pour montrer CSS vous suffit de faire une animation CSS de l'élément donné – maurycy

+0

a du sens, devinez que je dois rechercher des annimations css! –

Questions connexes