Question

我正在尝试在更新列表时实现动画。这是我在组件中使用的动画代码：

animations: [
    trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0, transform: 'translateX(-15px)' })),
        query(':enter', stagger('0ms', [
          animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
        ]))
      ])
    ])
  ]

我认为我有

 <div #ts class="ts ts-container ts-bot-wrapper" style="overflow: visible;" [@listAnimation]="bot.length">

          <ng-template ngFor let-i="index" let-item [ngForOf]="bot">

            <div class="ts-messages-container">
              <div *ngIf="!item.typing && item.message" class="ts-message">
                <div class="ts-message-content text"
                  [ngClass]="{'ts-from-bot': item.from === 'bot', 'ts-from-me': item.from === 'me'}">
                  <span [innerHTML]="(item.innerHTML || item.message) | safe: 'html'">{{ item.message }}</span>
                  <img *ngIf="item.image && item.image !== ''" class="ts-message-content-image" [src]="item.image"
                    alt="BOT">
                </div>
              </div>

              <div *ngIf="item.typing" class="ts-message">
                <div class="ts-message-content ts-loading">
                  <i class="ts-dot"></i>
                  <i class="ts-dot"></i>
                  <i class="ts-dot"></i>
                </div>
              </div>
            </div>

...

 </ng-template>

        </div>

我不知道为什么，但是只有当我将鼠标移到页面中的另一个元素时，才会触发动画。菜单选项，侧面菜单选项等。顺便说一下，它在角度6中可以正常工作，但是现在我已更新到角度7，并且不再可用。

这可能与变更检测或其他有关？

请帮忙吗？

角动画仅在下一次鼠标移动时触发

0 个答案: