我已經厭倦了幾個解決方案,這是我得到的最接近的解決方案。 但我仍然不滿意結果如何,因為當滑鼠離開元素時,元素會恢復到原來的旋轉狀態。 這個想法是,如果你越過該元素,即使滑鼠離開該元素,它也會觸發動畫。如果你將滑鼠懸停在元素上,它會播放動畫並保持在 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>
非常感謝您的幫忙。
一旦滑鼠離開元素,就會有一個平滑的動畫回到原始旋轉。
P粉3223196012024-04-02 00:03:49
你不需要 JS 也不需要任何花俏的類別。 transform
和 transition-duration
就可以了。
讓我們從 HTML 開始;這仍然是您的程式碼,但經過簡化:
Just a basic explanation of the picture.
現在,主要部分:CSS。由於您的卡片預設旋轉 -8 度,因此我們添加了一條規則來實現:
.rotate_left { transform: rotate(-8deg); transition-duration: 1s; transition-delay: 0.25s; }
如果將. Polaroid
停留在其上,它會旋轉回0度。這意味著我們可以使用偽類別 :hover
:
.polaroid:hover { transform: rotate(0deg); }
一旦您將滑鼠移離 .poloid
,:hover
規則就不再適用。這意味著它將在 1 秒內恢復到先前的規則,從滑鼠離開 0.25 秒後開始。
嘗試一下:
.rotate_left { transform: rotate(-8deg); transition-duration: 1s; transition-delay: 0.25s; } .polaroid:hover { transform: rotate(0deg); } /* Demo only */ .polaroid { border: 1px solid #bfbfbf; border-radius: 2%; padding: 10px 15px; height: 200px; width: 280px; box-shadow: 10px 10px 5px #aaa; }
Just a basic explanation of the picture.
為了防止復原停止,需要一些 JS。
首先,我們宣告一些常數:
const card = document.querySelector('.rotate_left'); const duration = 1000; // Duration of animation, in milliseconds. const delay = 250; // Delay before animation, in milliseconds. const keyframes = [ { transform: 'rotate(-8deg)' }, { transform: 'rotate(0deg)' }, ]; const options = { duration, delay, fill: 'forwards' };
然後我們建立一個處理程序:
const handler = () => { // New mouse over & leave should not mess with current animation. if (card.classList.contains('rotating')) { return; } // Let ourselves know that an animation is playing. card.classList.add('rotating'); let animation; if (card.classList.contains('not_rotated')) { // Rotated to 0 degree, reverting. animation = card.animate([...keyframes].reverse(), options); } else { animation = card.animate(keyframes, options); } // Make sure we clean after ourselves after animation. animation.finished.then(() => { card.classList.remove('rotating'); card.classList.toggle('not_rotated'); }); };
將其加入為 'mouseover'
/'mouseleave'
的事件處理程序,我們就完成了:
card.addEventListener('mouseover', handler); card.addEventListener('mouseleave', handler);
嘗試一下:
const card = document.querySelector('.rotate_left'); const duration = 1000; // Duration of animation, in milliseconds. const delay = 250; // Delay before animation, in milliseconds. const keyframes = [ { transform: 'rotate(-8deg)' }, { transform: 'rotate(0deg)' }, ]; const options = { duration, delay, fill: 'forwards' }; const handler = () => { if (card.classList.contains('rotating')) { return; } card.classList.add('rotating'); let animation; if (card.classList.contains('not_rotated')) { animation = card.animate([...keyframes].reverse(), options); } else { animation = card.animate(keyframes, options); } animation.finished.then(() => { card.classList.remove('rotating'); card.classList.toggle('not_rotated'); }); }; card.addEventListener('mouseover', handler); card.addEventListener('mouseleave', handler);
.rotate_left { transform: rotate(-8deg); } /* Demo only */ .polaroid { border: 1px solid #bfbfbf; border-radius: 2%; padding: 10px 15px; height: 200px; width: 280px; box-shadow: 10px 10px 5px #aaa; }
Just a basic explanation of the picture.