<div class="entries" *ngFor="let entry for entries"> <div class="entry"> <h2 (click)="toggle(entry.id);">{{ entry.title }}</h2> <div id="entry_{{ entry.id }}"> {{ entry.body }} </div> </div> <div class="entry"> <h2 (click)="toggle(entry.id);">{{ entry.title }}</h2> <div id="entry_{{ entry.id }}"> {{ entry.body }} </div> </div> </div>

I deduce the list of elements. in each there is a text block which must initially be hidden.

It is necessary to switch the visibility of the text block of an individual element by clicking on its title.

tell me what are the options, preferably with animation.

did like this

 <h2 (click)="project.desc_show=item.desc_show ? false : true;">TITLE</h2> <div *ngIf="item.desc_show">desc</div>
  • That is, everything already works for you, you need to fasten animation? Or you can not make it so that when you click on the title displayed a text block? - Vasilisa
  • In this example, no, it does not work. But I actually did it already, though the animation has not yet been screwed. - John Doe

2 answers 2

 <h2 (click)="project.desc_show=!item.desc_show">TITLE</h2> <div [class.fadeIn]="!item.desc_show">desc</div>

css

  .fadeIn { margin-top: 25px; font-size: 21px; text-align: center; -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */ -moz-animation: fadein 2s; /* Firefox < 16 */ -ms-animation: fadein 2s; /* Internet Explorer */ -o-animation: fadein 2s; /* Opera < 12.1 */ animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Safari, Chrome and Opera > 12.1 */ @-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Internet Explorer */ @-ms-keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* Opera < 12.1 */ @-o-keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

and the opposite for extinction

    Using the directive ngIf you can not screw the animation as it immediately when the boolean value hides / displays the block. I see the solution to this problem through the use of css classes and the ngClass directive.

  • Add to your project Animate.css
  • To the blocks that you want to hide / display add the class animated and the directive ngClass . It will look something like this:

     <div class="animated" [ngClass]="{'fadeOut': item.desc_show, 'fadeIn': !item.desc_show}">desc</div>
    • Well, it works. The text disappears, but it does not hide the block. Or is this normal behavior? on the website they have something like everything is crooked - John Doe
    • this is not true, ngIf works with native animations ( @angular/animations ), this directive does not hide / display the block, but creates a embedded view through internal mechanisms, thereby calling the animation functions that the compiler generates - overthesanity