Запуск анимации при наведении указателя мыши - PullRequest
Новая
       54

Запуск анимации при наведении указателя мыши

0 голосов
/ 07 ноября 2018

Я использую 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>
...