[問題]能否強制 ngFor再執行一次

General
1

各位好，
我想要做一個可以執行動畫的訊息頁面，程式如下圖，由於在舊的android 4.4.4跑，我無法使用angular內建的animation，所以我改成css3，當程式第一次進來或執行loaddata()時，動畫可以順利動作，但再執行loadendata()時只有變更內容，但動畫不會動作，我能否在loadendata()事件中讓html的14行如loaddata()執行，我試過this.chbuss=[…this.chbuss];及this.chbuss=this.chbuss.slice();都沒作用，卡關好久，請幫我看看是否有解，感謝。

image.png2871×1622 420 KB

2

請問有試看看用 ngOnChanges 嗎？

3

你的動畫是定義在哪裡? 我在這 code 裡面看不到?

@jeffwu85182 你有遇過類似的需求嗎?

4

CSS3 的部分應該是用 CSS class 去套對嗎?

那要不要試著建立一個專門跑動畫的 class ，只有這個 class 加入的時候去執行特效。

之後要再觸發的話，你再把 class 拿掉重加一次，這招也許有用。

另外可以的話，小小建議可以多換行幾次，閱讀起來會比較輕鬆喔!

5

目前還沒遇過，原來 4.4.4 的 angular animation 會死掉阿…:scream:

6

app-busitem component 這段忘了放上來，目前就是用class的方式，這個方式動畫只能跑一次，第二次就無效囉，除非ngFor再跑一次。

image.png1486×1035 96.5 KB

7

請問動畫效果的 class 名稱是哪一個?

ngClass 的部分嗎? 如果兩個 class 的動畫效果都是一樣的，可能是在切換的時候就已經到達定位了。

因此不會再次顯示效果，還不確定是哪個，這樣看不好說，

如果有範例可以還原問題的話就更好了。

8

動畫的class內容是這樣， .en往前轉 .ch往後轉

image.png981×1399 107 KB

9

可利用 markdown hightlight 程式碼的語法來標示，這樣子其他人比較容易將你的程式碼，拿去做測試

10

還沒用過Markdown,是否如下：

.en {
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: to180;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
  /* Standard syntax */
  animation-name: to180;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.ch {
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: to180;
  -webkit-animation-duration: 2s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-direction: reverse;
  /* Standard syntax */
  animation-name: to180;
  animation-duration: 2s;
  animation-timing-function: ease-in;
  animation-direction: reverse;
  animation-fill-mode: forwards;
}

@-webkit-keyframes to180 {
  0% {
    transform: rotateX(0deg);
    z-index: 100;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 0;
  }
}

/* Standard syntax */

@keyframes to180 {
  0% {
    transform: rotateX(0deg);
    z-index: 100;
  }
  50% {
    transform: rotateX(90deg);
    z-index: 0;
  }
  100% {
    transform: rotateX(180deg);
    z-index: 0;
  }
}
11

我修正了一下你的文章，你看一下我修正後的寫法。在 code hightlight 的地方你可以指定要顯示的語言是哪一種
例如 css, html, javascript, typescript 等

可以使用的編輯方式可以參考這篇文章

Markdown

Simple: the Markdown implementation is very close to the standard.

http://commonmark.org/help420

1個讚
12

用了一個簡單的測試，看起來是 CSS 的關係