Как добавить анимацию, когда данные изменяются в угловых? Я хочу добавить анимацию на левую и правую кнопку - PullRequest
Новая
       21

Как добавить анимацию, когда данные изменяются в угловых? Я хочу добавить анимацию на левую и правую кнопку

0 голосов
/ 01 мая 2019

когда я нажимаю на правую и левую кнопку, тогда данные должны идти с анимацией, но это не сработало для меня

Я добавил анимацию void в угловую и установил триггер на моем элементе HTML, анимация работала, когдастраница обновляется, но она не работает, когда я нажимаю правую или левую кнопку 

animations:[
trigger('divstate',[
  state('in',style({
    opacity:1,
    transform:'translateX(0)'
  })),
  transition('void => *',[
    style({
      opacity:0,
      transform:'translateX(-100px)'
    }),
    animate(300)
  ]),
]),

] 

<div class="box-2" [@divstate]>
  <div class="left-arrow">
    <a class="cursor_pointer" (click)="previousData()">
      <img src="assets/left_arrow.png" alt="">
    </a>
  </div>
  <div class="container-1">
    <div class="grid-1" [@divstate]>
      <div class="item-1 font_p">
        <h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section1}}</h3>
        <br>
        <p [@divstate]>{{cardData[currentPosition].section1Text}}
        </p>
        <br>
        <h3 class="color_saffron" [@divstate]>{{cardData[currentPosition].section2}}</h3><br>
        <p [@divstate]>{{cardData[currentPosition].section2Text}}</p>
      </div>
      <div class="item-2" [@divstate]>
        <img src="{{cardData[currentPosition].image1}}" alt="">
      </div>
    </div>
    <br><br>
    <div class="grid-2" [@divstate]>
      <div class="item-2">
        <img src="{{cardData[currentPosition].image2}}" alt="">
      </div>
      <div class="item-1 font_p" [@divstate]>
        <h3 class="color_saffron">{{cardData[currentPosition].section3}}</h3>
        <br>
        <p>{{cardData[currentPosition].section3Text}}</p>
      </div>
    </div>
  </div>
  <div class="right-arrow">
    <a class="cursor_pointer" (click)="onAnimate()" (click)="nextData()">
      <img src="assets/right_arrow.png" alt="">
    </a>
  </div>
</div>

всякий раз, когда я нажимаю левую или правую кнопку, данные должны поступатьс анимацией анимация работала при обновлении страницы

1 Ответ

2 голосов
/ 02 мая 2019

Я создал простой пример для вас здесь:

Угловая анимация слева | Правильный пример

Нажмите на Анимация слева | Animate Right | Анимированный нейтральный div для перемещения синей рамки

...