可以在课堂上移除一个CSSanimation？

基本上我想要做的是给一个元素一个CSSanimation，当它获得一个类，然后扭转animation，当我删除该类没有播放animation时，DOM呈现 。

小提琴在这里： http : //jsfiddle.net/bmh5g/

正如您在小提琴中所看到的那样，当您hover“hover我”button时，# #item向下翻转。 当鼠标hoverbutton时，#item就会消失。 我希望#item翻转（理想情况下使用相同的animation，但相反）。 这可能吗？

HTML：

 <div id='trigger'>Hover Me</div> <div id='item'></div> 

CSS：

 #item { position: relative; height: 100px; width: 100px; background: red; -webkit-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } #item.flipped { animation: flipper 0.7s; animation-fill-mode: forwards; -webkit-animation: flipper 0.7s; -webkit-animation-fill-mode: forwards; } @keyframes flipper { 0% { transform: perspective(350px) rotateX(-90deg); } 33% { transform: perspective(350px) rotateX(0deg); } 66% { transform: perspective(350px) rotateX(10deg); } 100% { transform: perspective(350px) rotateX(0deg); } } @-webkit-keyframes flipper { 0% { -webkit-transform: perspective(350px) rotateX(-90deg); } 33% { -webkit-transform: perspective(350px) rotateX(0deg); } 66% { -webkit-transform: perspective(350px) rotateX(10deg); } 100% { -webkit-transform: perspective(350px) rotateX(0deg); } } 

使用Javascript：

 $('#trigger').on({ mouseenter: function(){ $('#item').addClass('flipped'); }, mouseleave: function(){ $('#item').removeClass('flipped'); } }) 

Answer 1

我会默认情况下，# #item开始隐藏与反向animation。 然后添加类给它的animation，并显示#item 。 http://jsfiddle.net/bmh5g/12/

jQuery的

 $('#trigger').on({ mouseenter: function(){ $('#item').show(); $('#item').addClass('flipped'); }, mouseleave: function(){ $('#item').removeClass('flipped'); } }); 

CSS

 #item { position: relative; height: 100px; width: 100px; background: red; display: none; -webkit-transform: perspective(350px) rotateX(-90deg); transform: perspective(350px) rotateX(-90deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; animation: flipperUp 0.7s; animation-fill-mode: forwards; -webkit-animation: flipperUp 0.7s; -webkit-animation-fill-mode: forwards; } 

Answer 2

另一种方法，而不是使用display: none ，是在页面加载时用一个类来禁止反向animation，然后用与应用正常animation相同的事件（例如：鳍状肢）去除那个类。 像这样（ http://jsfiddle.net/astrotim/d7omcbrz/1/ ）：

CSS – 除了上面Blake发布的flipperUp关键帧之外

 #item.no-animation { animation: none; } 

jQuery的

 $('#trigger').on({ mouseenter: function(){ $('#item').removeClass('no-animation'); $('#item').addClass('flipped'); }, mouseleave: function(){ $('#item').removeClass('flipped'); } }) 

Answer 3

它的animation使用css来让它动起来，你需要创build一个类，比如说.item-up做相反的转换，那么你将删除以前的类，并添加项目类，并应该animation它起来。

我会给你写一个js小提琴，但我不太了解这个语法。

基本上，当你需要：

 @keyframes flipper @keyframes flipper-up //This does the opposite of flipper 

和

 $('#trigger').on({ mouseenter: function(){ $('#item').removeClass('flipped-up'); $('#item').addClass('flipped'); }, mouseleave: function(){ $('#item').removeClass('flipped'); $('#item').addClass('flipped-up'); } }) 

jsfiddle.net/bmh5g/3杰克礼貌