CODEWITHSUNDEEP
angularjscssangularjs-ng-clickng-show
Oam Psy
Oam Psy

Reputation: 8663

AngularJS - Sliding Effect On ng-click

I have created a simple ng-click function that hides and shows a DIV.

However, rather and simply appearing and disappearing, does angular have the ability to give a sliding effect?

Here's a 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>

Upvotes: 1

Views: 6597

Answers (1)

maurycy
maurycy

Reputation: 8465

You should have a good read about ng-animate (it have to be injected into your app - something a lot of ppl forget) then you can take a look here http://www.nganimate.org/angularjs/ng-switch/slider-css3-transition-animation

a well designed examples of what ng-animate can do

Google CDN angularjs-animate.min.js

Upvotes: 1

Related Questions