AngularJS Transition on click

Question

I am kind of new with angular and I found this way to use ng-click and ng-show to show the div with information in when the user clicks the h3. The only problem is that it just shows up and I would like is it fades in or slides down to be visible. :) Is this gonna work or should I do another way??

<div class="col-sm-12">
    <div>
        <h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
        <hr class="no-margin-top hr-line">
    </div>
</div>

<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top" style="border: 1px solid purple" ng-show="showInfoHe">
    <div class="row cats-attributes">
        <p>info</p>
    </div>
</div>

You would need ngAnimate

Aleksey Solovey
– Aleksey Solovey

2018-03-26 14:11:55 +00:00
Commented Mar 26, 2018 at 14:11 — Aleksey Solovey
– Aleksey Solovey, Commented Mar 26, 2018 at 14:11
Check this ngAnimate tutorial here

LenglBoy
– LenglBoy

2018-03-26 14:14:47 +00:00
Commented Mar 26, 2018 at 14:14 — LenglBoy
– LenglBoy, Commented Mar 26, 2018 at 14:14

Yftach · Accepted Answer · 2018-03-27 09:25:38Z

1

You can do this without ngAnimate, by using css transitions and ngClass what you want to do on click set a variable to true and then have a class that has opacity:1.

so

<div class="parent-div" ng-click="yourVariable = true">
  <div class="child" ng-class={'opacity-class': yourVariable}>
  </div>
</div>

and then in the css

.parent-div {
  transition: opacity ease-in-out 1s;

}
.parent-div.child {
    opacity:0;
  }
.opacity-class {
   opacity:  1;
}

EDIT: here is an applied solution to the html structure you provided

<div class="col-sm-12">
    <div>
        <h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
        <hr class="no-margin-top hr-line">
    </div>
</div>
<div class="show-info-container">
  <div class="col-xs-12 col-md-offset-3 col-md-9 margin-top show-info" style="border: 1px solid purple" ng-class="{'opacity-class':showInfoHe}">
      <div class="row cats-attributes">
          <p>info</p>
      </div>
  </div>
</div>

css

.show-info-container {
  transition: opacity ease-in-out 1s;

}
.show-info {
    opacity:0;
  }
.opacity-class {
   opacity:  1;
}

notice i added a container div and removed the ng-show

edited Mar 27, 2018 at 9:25

answered Mar 26, 2018 at 15:01

Yftach

7525 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Yftach Over a year ago

you can also do the slide down effect with @keyframes animation, i wont go into details but its the general same approach. good luck :)

Lacon Over a year ago

thanks! :) but how does that work with ng-click that i already have on the parent? The one that makes the child div show with ng-show.

Yftach Over a year ago

and don't forget to approve the answer if it helped you :)

Collectives™ on Stack Overflow

AngularJS Transition on click

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related