Сохранение результата анимации - PullRequest
Новая
       102

Сохранение результата анимации

0 голосов
/ 19 июня 2020

Я написал примерно так: 

 <svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">

           
                <defs><style>

               .cls-21{


                   fill:white;
                   cursor: pointer;                                                                                        }
                       .svg-cab:hover .cls-21{
                           stroke-dasharray: 1000;stroke-miterlimit:10;stroke-width:20px;
                           stroke-dashoffset: 1000;
                           animation: dash 1s linear;
                           stroke: white;
                        }

               @keyframes dash {
                   from {
                       stroke-dashoffset: 999;

                   }
                   to {
                       stroke-dashoffset: 0;

                   }
               }


                    </style></defs><path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg></a>
Это анимация, когда я нахожу на svg, обводка нависает над ней, и мне нужно, чтобы после завершения анимации обводка была сохранена до наведения курсора

Есть ли у кого-нибудь идеи ?

1 Ответ

1 голос
/ 19 июня 2020

Вы можете полагаться на forwards и animation-play-state, чтобы смоделировать это. Хитрость заключается в том, чтобы переместить все стили, которые вам нужно сохранить внутри анимации, и вперед выполнит свою работу по их сохранению 

.cls-21 {
  fill: red;
  cursor: pointer;
  animation: 
    dash   1s linear paused forwards, 
    stroke 1s linear paused forwards;
}

.svg-cab:hover .cls-21 {
  stroke-dasharray: 1000;
  stroke-miterlimit: 10;
  animation-play-state: running;
}

@keyframes dash {
  from {
    stroke-dashoffset: 999;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes stroke {
  1%,100% {
    stroke: white;
   stroke-width: 20px;
  }
}
<svg class="svg-cab" height="35px" width="35px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 202 228.7">
<path class="cls-21" d="M277.3,192.9a53.3,53.3,0,1,1-51.6-51.5A53.3,53.3,0,0,1,277.3,192.9Z" transform="translate(-123 -136.3)"/><path class="cls-21" d="M269.3,264H178.7A50.7,50.7,0,0,0,128,314.7V352a8,8,0,0,0,8,8H312a8,8,0,0,0,8-8V314.7A50.7,50.7,0,0,0,269.3,264Z" transform="translate(-123 -136.3)"/></svg>
...