Question

我使用KUTE.js将一种SVG形状变形为另一种形状。

我需要通过将鼠标指针悬停来触发动画，然后从div中删除鼠标指针时将其反转。像这样的行为：

https://codepen.io/digistate/pen/kkVJkR?editors=1010

您可以从那支笔上看到，鼠标悬停是触发变体的功能，无论是打开还是关闭。您如何使用KUTE.js做同样的事情？

这是我到目前为止所拥有的：

https://codepen.io/Wcomp/pen/gQaoMp?editors=0010

您会注意到动画在鼠标悬停时运行，但在鼠标悬停时不会反转。

这是HTML：

<!DOCTYPE html>
<html>
<head>  
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="Test Site">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

<div id="wrapper">

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >

    <path id="rectangle" fill="teal" d="m19.953 26.154c-1.4541 1.35e-4 -2.7772 1.3232-2.7773 2.7773v29.633c1.36e-4 1.4541 1.3232 2.7772 2.7773 2.7773h169.33c1.4541-1.35e-4 2.7772-1.3232 2.7773-2.7773v-29.633c-1.3e-4 -1.4541-1.3232-2.7772-2.7773-2.7773h-84.668z" />

    <path id="star" style="visibility:hidden" d="m19.953 26.154c-1.4541 1.35e-4 -2.7772 1.3232-2.7773 2.7773 0 0 0.11211 6.2895-0.16817 5.8964-0.28028-0.39304 6.7828 2.7012 6.7828 9.3158s-6.6146 9.2604-6.6146 9.2604v5.1602c1.36e-4 1.4541 1.3232 2.7772 2.7773 2.7773h169.33c1.4541-1.35e-4 2.7772-1.3232 2.7773-2.7773v-29.633c-1.3e-4 -1.4541-1.3232-2.7772-2.7773-2.7773h-84.668z"/>

  </svg>

</div>

   <script src="./kute.min.js"></script>
    <!-- KUTE.js core -->
    <script src="./kute-svg.min.js"></script>
    <!-- KUTE.js CSS Plugin -->
</body>

<footer>
    <script src="main.js"></script>
</footer>

</html>

悬停鼠标指针来触发动画

0 个答案: