0

状況

  • DOM 要素の初期状態はopacity: 0.
  • アニメーション クラスを DOM 要素に追加しています。アニメーションは別として、このクラスの初期状態はopacity: 1です。
.animation { 
    opacity: 1;
    animation(fadeIn 1s 200ms ease-in-out); 
}
  • アニメーションは 200 ミリ秒の遅延で実行され、初期状態はopacity: 0です。
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

問題

アニメーション クラスが DOM 要素に追加されると、要素は 200 ミリ秒の間即座に表示され、その後、DOM 要素を点滅させて非表示の状態に戻すことで、フェードイン アニメーションが開始されます。これとは逆に、アニメーション (キーフレーム) 属性opacity:0がアニメーション クラス属性を上書きしopacity:1、その結果、フェードイン アニメーションが滑らかになるようにしたいと考えています。

このアプローチの理由は、古いブラウザーのサポートです。

編集：実際のプロジェクトコードを追加しました（明確にするため）

@for $i from 1 through 3 {
  &.showAddonColumn#{$i} {

      td:nth-child( #{$i + 1} ) {
          display: table-cell;
      }

      @for $j from 1 through 15 {
          tr:nth-child( #{$j} ) {

              td {

                  .checkable {
                      @include transform-origin(50%, 0%);
                      @include animation(leafShow 1s #{$j*100ms} cubic-bezier(.37,0,.16,.94) 1);
                      @include animation-fill-mode(forwards);
                  }
              }
          }
      }
  }
}
4

1 に答える 1

2

アニメーション自体を手動で遅らせることができます。

@keyframes fadeIn {
    0% { opacity: 0; }
    17% { opacity: 0; }
    100% { opacity: 1; }
}

アニメーションを拡張します。

animation: fadeIn 1200ms ease-in-out;
于 2013-07-31T19:47:36.773 に答える