0

要素の背景サイズを増減する基本的なCSS3アニメーションテストを設定しました。要素の1つをクリックすると、アクティブなクラスが切り替えられ、遷移が発生します。私の問題は、.activeクラスが削除されると、アニメーションをnoneにリセットしたため、アニメーションが発生しなくなることです。誰かがこの問題を解決する方法をアドバイスできますか？

CSS

html{height:100%;}
body {background:#000;height:100%;min-height:100%;padding:20px}
ul{height:100%;display:block}
li{float:left;margin-right:30px;position:relative;}

@-webkit-keyframes throb_outer {
      0% { background-size:1px 100%; }
      100% { background-size:1px 130%; }
}

@-webkit-keyframes throb_inner {
      0% { background-size:1px 100%; }
      100% { background-size:1px 115%; }
}

.outer{display:block;width:50px;padding:0 1px;cursor: pointer;
-webkit-animation: throb_outer 2s infinite alternate;
}

.b{background: -webkit-linear-gradient(black 30%, rgba(41,184,229,1) 50%, black 70%) repeat-x; }
.g{background: -webkit-linear-gradient(black 20%, rgba(33, 130, 61, 1) 50%, black 80%) repeat-x;}
.r{background: -webkit-linear-gradient(black 40%, rgba(255,0,0,1) 50%, black 60%) repeat-x;}

.li{height:100%;-webkit-transition: background-size .3s linear;
    background-position:0 50%;
    background-size:1px 100%;}

.inner{
    width:100%;
    display:block;
        -webkit-animation: throb_inner 2s infinite alternate;
}



.outer.active{-webkit-animation:none;background-size:1px 200%;}
.outer.active .inner{-webkit-animation:none;background-size:1px 150%;}
​

JS

$(document).ready(function() {


    $('#test').children().on('click', function(e) {

        $(this).toggleClass('active');


    });

});

ここでフィドル：http：//jsfiddle.net/VQaGh/22/

4

1 に答える 1

0

私の理解として、あなたはこのような効果を望んでいます

これを試してみてくださいhttp://jsfiddle.net/Sk2sX/

css と js の両方を変更しました。

コードに関する質問については、コメントを投稿してください

于 2012-07-19T11:31:01.997 に答える