0

私はcss3アニメーションに取り組んでおり、アニメーションが終了した後、基本的にアニメーションの値を要素に適用できるanimation-fill-modeプロパティに出くわしました。

デフォルトでは、アニメーションが終了すると、要素は元の状態に復元されます。

たとえば

 #box{
     width: 100px;
     position: absolute;
 }

#box.startAnimation{

    animation-name:first, second;
    animation-duration:5s, 5s;
    animation-timing-function:linear;
    animation-delay:0s, 5s;
    animation-iteration-count:1;
    animation-fill-mode:forwards;
}

@-moz-keyframes first
{
    0%   {left:40%; top:0px;background:cyan}
    100% {left:100px; top:0px;}
}

@-moz-keyframes second
{
     0%   {left:100px; top:0px;}
     100% {left:0px; top:300px;width:300px}
}

forwards animation-fill-mode は、startAnimation クラスが適用される要素を、幅 300 ピクセル、上 300 ピクセル、左 0 ピクセルに配置します。

ただし、これらの値は要素の計算されたスタイルに適用され、css スタイルには適用されません。

誰かが要素の幅などを取得しようとすると、300px ではなく 100px が返されるため、これにより不整合が生じる可能性があります。

上記は、アニメーションが作成され、幅、高さ、左などのプロパティにアクセスする必要がある JavaScript ロジックがある大規模なプロジェクトでは、本当に奇妙になる可能性があります。

計算されたスタイルと div.style.width を介して読み取ったスタイルとの間にこの不一致があることを意味します(たとえば)

上記の問題に対する意見や解決策を知りたい

よろしく

4

1 に答える 1

0

それはあなたが達成しようとしていることに依存すると思います。解決しようとしている問題のより具体的な使用例があれば、より具体的な回答を得ることができるかもしれません。

上記の場合、キーフレームは使用しません。ほとんどのプロジェクトでは、人が歩いたり何かのような高度なアニメーションを作成しない限り、キーフレームは必要ありません。ほとんどの Web インターフェイスでは、移行とクラスの変更は問題なく機能するようです。

基本クラスと遷移クラスがあり、javascript を使用して遷移クラスを追加します。その後、キーフレームの最後ではなく、追加したクラスから取得されるため、状態は維持され、一貫性が保たれます。

.base-class { width: 100px; left: 0; top: 0; -webkit-transition: 1s all; }
.transition-class { width: 300px; -webkit-transform: translateX(300px); }

$('.base-class').on('click', function(){ $(this).addClass('transition-class'); });

必要に応じて、JS を使用してアニメーションの終わりを見つけることもできます

$('.base-class').on('-webkit-transition-end', function(){
    var width = $(this).width();
    alert(width);
})

（また、左の代わりにtranslateXを使用します。少し高速です）

于 2012-11-22T20:05:19.797 に答える