0

我已经设置了一个基本的 CSS3 动画测试，它增加和减少元素的背景大小，当您单击其中一个元素时，将切换活动类并发生过渡。我的问题是，当删除 .active 类时，动画不再发生，因为我已将动画重置为无。谁能告诉我如何解决这个问题？

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 回答