离开悬停后完成CSS动画-Java 学习之路

我有一个酒吧，当盘旋时，它会从蓝色垂直翻转到灰色 . 离开时，它会变回蓝色 . 大 .

PROBLEM
它只会在你处于悬停状态时动画 . 如果您将鼠标悬停在"unhover"上，它就无法完成动画 .

GOAL
我想让它从蓝色翻转到灰色，然后再回到蓝色，即使是徘徊了一瞬间 . 我不希望你在取消悬停时动画立即停止 .

ATTEMPTS
我用纯CSS完成了 .

我尝试添加以下jquery代码，从这个问题添加和删除动画类：css3 animation on :hover; force entire animation：

$(".bar").bind("transitionend webkitTransitionEnd oTransitionEnd", function(){
$(this).removeClass("vFlipper") 
})
$(".bar").hover(function(){
$(this).addClass("vFlipper");
})

并将 .vFlipper 的CSS更改为 .bar.vFlipper ，但我似乎总是会给我带来问题 . 我理解它如何与DIV一起使用，而不是列表 .

FIDDLE
http://jsfiddle.net/zuhloobie/t9x723tq/1/

任何帮助，将不胜感激：）

## UPDATE ##
我真的很喜欢这个小提琴：http://jsfiddle.net/zuhloobie/t9x723tq/8/

虽然它有问题 . 当您从左侧输入 li 时，它将翻转为灰色，但退出时不会翻转为蓝色 . 当您从顶部，右侧或底部输入 li 时，它在悬停时不会翻转为灰色，但是当您退出时它将执行整个动画 . 想法？

1 回答

你应该尝试这种类型的 code/syntax

$(document).ready(function(){
    $('#bar').bind( "click transitionend webkitTransitionEnd oTransitionEnd", function() {
// css for doing flipping will go here;
//  alert( "User clicked on bar" );

});

$('#bar').bind( "click transitionend webkitTransitionEnd oTransitionEnd", function() {
// css for returning/reversing flipper  will go here;
//  alert( "User clicked on bar" );

});

});

回复于 2024-05-05T02:43:36+08:00

离开悬停后完成CSS动画

1 回答

相关问题