0
<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>

Вывожу список элементов. в каждом есть текстовый блок какой изначально должен быть скрыт.

Нужно переключать видимость текстового блока отдельного элемента по нажатию на его заголовок.

подскажите какие есть варианты, желательно с анимацией.

сделал вот так

<h2  (click)="project.desc_show=item.desc_show ? false : true;">TITLE</h2>
<div *ngIf="item.desc_show">desc</div>
2
  • То есть, у вас уже всё работает, вам нужно прикрутить анимацию? Или вы не можете сделать так, что при клике по заголовку отображался текстовый блок? 28 янв 2018 в 14:01
  • в данном примере нет, не работает. Но я вообщем то сделал уже, правда анимацию еще не прикручивал.
    – John Doe
    28 янв 2018 в 14:31

2 ответа 2

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

и обратное для исчезновения

-1

Используя директиву ngIf вы не сможете прикрутить анимацию так как она сразу же при значение boolean скрывает/отображает блок. Решение данной задачи я вижу через использование css классов и директивы ngClass.

  • Добавьте в ваш проект Animate.css
  • К блокам которые вы хотите скрыть/отобразить добавьте класс animated и директиву ngClass. выглядеть это будет примерно так:

    <div class="animated" [ngClass]="{'fadeOut': item.desc_show, 'fadeIn': !item.desc_show}">desc</div>
    
  • 2
    • ну оно работает текст пропадает, но блок оно не скрывает. или это нормальное поведение? на сайте у них вообще что-то все как то криво
      – John Doe
      8 авг 2018 в 6:33
    • это неправда, ngIf работает с нативными анимациями (@angular/animations), эта директива не скрывает/отображает блок, а создает embedded вьюху через внутренние механизмы, тем самым вызывая функции анимаций, которые генерирует компилятор 13 ноя 2018 в 13:59

    Ваш ответ

    Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

    Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.