當鼠標懸停在 hover 上時顯示 Css animation

Question

我想展示 animation 繪制一條有角度的直線，並在將鼠標懸停在按鈕上時從左到右顯示我的文本，我在這方面相當陌生。 在 animation 完成后，還有什么方法可以讓我的文本保留下來，而不是 go 離開？

這是我的代碼，該代碼是堆棧溢出的其他答案的組合。

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

Answer 1

您需要在具有 Javascript 的div.skew元素上添加/切換 class，並在該 class 或具有該 class 的元素的子元素上定義animation規則，如下所示：

 var button = document.querySelector("button.menubtn"); //Select the button var skewElement = document.querySelector("div.skew"); //Select the 'skew' element button.onmouseover = function(){ skewElement.classList.toggle("startAnimation"); }

 .skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); }.skew.startAnimation { animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); }.startAnimation.line { animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { opacity: 0; position: relative; top: -17px; left: 15px; }.startAnimation.showText { animation: showText 2s; animation-fill-mode: forwards; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn">hover over me</button> </div> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div>

為了即使在動畫結束后也能看到文本，您必須在.showText上指定animation-fill-mode: forwards ，就像我在上面的代碼片段中所做的那樣。

Answer 2

要在懸停時完成 animation，首先我們必須使用 javascript 創建一個用於懸停該特定元素的事件

然后在觸發該事件時調用 function，它會為您顯示一些動畫

為簡單起見，我只是為您的整個 animation 元素制作了一個父 div，並且最初沒有顯示

稍后懸停時，我們將該父元素的 css 顯示屬性更改為block ，這將顯示所有動畫元素

還要確保您的文本保留在 animation 之后，有一個名為forwards的 animation 屬性，它將在以后保留您的最終 animation state

 var hvrbtn=document.getElementById("hvrbtn"); hvrbtn.onmouseover=()=>{ var anim=document.getElementById("anim"); anim.style.display="block"; };

 .animated{ display:none; }.skew { position: relative; margin: 100px; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(-45deg); animation: draw 0.5s linear; animation-fill-mode: forwards; }.line { position: absolute; left: 100%; top: 0; content: ''; width: 0; height: 2px; background: #f00; transform-origin: 0 100%; transform: rotate(45deg); animation: drawLine 0.7s linear; animation-delay: 0.5s; animation-fill-mode: forwards; }.showText { animation: showText 2s forwards; position: relative; top: -17px; left: 15px; opacity: 0; } @keyframes showText { 0% { opacity: 0; transform: translateX(-20px); } 50% { opacity: 0; } 100% { opacity: 1; transform: translateX(0); } } @keyframes draw { 0% { width: 0px; } 100% { width: 100px; } } @keyframes drawLine { 0% { width: 0px; } 100% { width: 100px; } }

 <div> <button class="menubtn" id="hvrbtn">hover over me</button> </div> <div class="animated" id="anim"> <div class="skew"> <div class="line"> <div class="showText">menu item</div> </div> </div> <div>