我已经厌倦了几个解决方案,这是我得到的最接近的解决方案。 但我仍然不满意结果如何,因为当鼠标离开元素时,元素会恢复到原来的旋转状态。 这个想法是,如果你越过该元素,即使鼠标离开该元素,它也会触发动画。如果你将鼠标悬停在元素上,它会播放动画并保持在 0 度,一旦鼠标离开,另一个动画就会播放,并旋转回 -8 度。
const elements = document.getElementsByClassName('rotate_left'); for (let i = 0; i <= elements.length; i++) { elements[i].addEventListener('animationend', function(e) { elements[i].classList.remove('animated') /*elements[i].classList.add('animatedback')*/ }); elements[i].addEventListener('mouseover', function(e) { elements[i].classList.add('animated') elements[i].classList.remove('animatedback') }); }
.rotate_left { -ms-transform: rotate(-8deg); -webkit-transform: rotate(-8deg); transform: rotate(-8deg); transition-duration: 1s; transition-delay: 0.25s; } .polaroid { width: 280px; height: 200px; padding: 10px 15px 100px 15px; border: 1px solid #BFBFBF; border-radius: 2%; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; } .polaroid:hover { width: 280px; height: 200px; padding: 10px 15px -100px 15px; border: 1px solid #BFBFBF; border-radius: 2%; background-color: white; box-shadow: 10px 10px 5px #aaaaaa; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); transition-duration: 1s; transition-delay: 0.25s; } @keyframes animationBegining { from { -ms-transform: rotate(-8deg); /* IE 9 */ -webkit-transform: rotate(-8deg); /* Safari */ transform: rotate(-8deg); } to { -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg); } } @keyframes animatedBack { form { -ms-transform: rotate(0deg); /* IE 9 */ -webkit-transform: rotate(0deg); /* Safari */ transform: rotate(0deg); } to { -ms-transform: rotate(-8deg); /* IE 9 */ -webkit-transform: rotate(-8deg); /* Safari */ transform: rotate(-8deg); } } .animatedback { animation: animatedBack 2s; } .animated { animation: animationBegining 2s; }
<div id="modalWrepper1" class="polaroid rotate_left"> <p class="caption">Just a basic explanation of the picture.</p> </div>
非常感谢您的帮助。
一旦鼠标离开元素,就会有一个平滑的动画返回到原始旋转。
纯 CSS 解决方案(第二个动画需要预防)
你不需要 JS 也不需要任何花哨的类。
transform
和transition-duration
就可以了。让我们从 HTML 开始;这仍然是您的代码,但经过简化:
现在,主要部分:CSS。由于您的卡默认旋转 -8 度,因此我们添加了一条规则来实现:
如果将
. Polaroid
悬停在其上,它会旋转回0度。这意味着我们可以使用伪类:hover
:一旦您将鼠标移离
.poloid
,:hover
规则就不再适用。这意味着它将在 1 秒内恢复到之前的规则,从鼠标离开 0.25 秒后开始。尝试一下:
防止第二个动画停止
为了防止恢复停止,需要一些 JS。
首先,我们声明一些常量:
然后我们创建一个处理程序:
将其添加为
'mouseover'
/'mouseleave'
的事件处理程序,我们就完成了:尝试一下: