[英]Toggling classes not working as expected with css3 animation
By using the below code i was just tried to toggle the text shadow with animating effect, i had done it for the forward flow but the reverse flow is not working smoothly. 通过使用下面的代码,我只是试图切换具有动画效果的文本阴影,我已经完成了正向流程,但是反向流程无法正常工作。 It is reverting without any animation effect.
它正在还原,没有任何动画效果。 Can anybody help me to fix this.?
有人可以帮我解决这个问题吗?
HTML: HTML:
<h1>testing testing testing</h1>
<button>glow</button>
<button>unglow</button>
JS: JS:
$(':button:contains(glow)').click(function () {
$('h1').addClass('shadow');
});
$(':button:contains(unglow)').click(function () {
$('h1').addClass('removeShadow');
});
CSS: CSS:
h1.removeShadow {
-webkit-animation: removeGlow 1s 1;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes removeGlow {
to {
text-shadow: 1px 0px 0px rgba(0, 0, 0, 0);
}
}
h1.shadow {
-webkit-animation: glow .7s 1;
-webkit-animation-fill-mode:forwards;
}
@-webkit-keyframes glow {
to {
text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
}
}
@-webkit-keyframes removeGlow {
from {
text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
}
to {
text-shadow:none;
}
}
Maybe just my oppinion but that seems to be too much of a struggle. 也许只是我的观点,但这似乎太麻烦了。
New demo: http://jsfiddle.net/Z6k8V/5/ 新的演示: http : //jsfiddle.net/Z6k8V/5/
h1
{
transition-duration: 1s;
transition-property: text-shadow;
}
h1.shadow
{
text-shadow:1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0), 1px 1px 10px rgb(255, 153, 0);
}
Even simpler, this can be done with a transition and toggleClass
更简单的是,这可以通过transition和
toggleClass
CSS 的CSS
h1 {
transition:text-shadow 1s ease;
}
.shadow {
text-shadow:1px 1px 10px rgb(255, 153, 0),
1px 1px 10px rgb(255, 153, 0),
1px 1px 10px rgb(255, 153, 0);
}
JQuery jQuery查询
$(':button:contains(glow)').click(function () {
$('h1').toggleClass('shadow');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.