jQuery中的关键帧事件，无需刷新浏览器

Question

我有一个使用jQuery生成动画的函数。代码工作正常但我必须刷新浏览器才能重新启动动画。我有一个触发该功能的按钮。

这是我到目前为止所做的：

＆＃13;

＆＃13;

@Repository
public interface UserRepository extends CrudRepository<User, User.UserPK> {
    User findByIdAndAndType(Long id, String type);
}

＆＃13;

$(document).ready(function() {
    "use strict";
    $(".animar").click(function() {
        $('#img5').addClass("uno");
    });
});

＆＃13;

#img4 {
    width: 7%;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
    float: left;
}

#img5 {
    position:absolute;
     width: 5%;
     left: 104px;
    height: auto;
    margin: auto;
    display: block;
    background-size:20%;
}

.animar {
    width: 123px;
    height: auto;
    margin-right: 15%;
    display: block;
    background-size:0%;
    float:right;
    border-color: white;
    background-color: rgba(43,86,162, 1.00);
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 20px;
    color: white;
    border-radius: 12px;
    border-width: 10px;
}

.uno {
    animation-name: uno;
    animation-duration: 10s;
}	 

@keyframes uno {
    20% {
        right:20%;
    }
    40% {
        right:40%;
    }
    50%{
        right:60%;
    }
    70%{
        right:80%;
    }
    100%{
        right:100%;
    }
}

＆＃13;

＆＃13;

＆＃13;

每次点击该按钮都会重新开始动画。

Answer 1

它有点hacky，但您可以通过删除动画类重新启动动画，然后在setTimeout之后重新添加动画。有关于重新启动动画的各种方法的教程here。

＆＃13;

＆＃13;

$(document).ready(function() {
    "use strict";
  $(".animar").click(function() {
    $('#img5').removeClass("uno");
    setTimeout(function() { $('#img5').addClass('uno'); }, 10);
  });
});

＆＃13;

   #img4{
        width: 7%;
        height: auto;
        margin: auto;
        display: block;
        background-size:20%;
        float: left;

    }

    #img5{
        position:absolute;
         width: 5%;
         left: 104px;
        height: auto;
        margin: auto;
        display: block;
        background-size:20%;
    }

    .animar{
        width: 123px;
        height: auto;
        margin-right: 15%;
        display: block;
        background-size:0%;
        float:right;
        border-color: white;
        background-color: rgba(43,86,162, 1.00);
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: 20px;
        color: white;
        border-radius: 12px;
        border-width: 10px;

    }

.uno{
    animation-name: uno ;
    animation-duration: 10s;
}    

@keyframes uno
{
    20% {
        right:20%;
    }
    40% {
        right:40%;
    }
    50%{
        right:60%;
    }
    70%{
        right:80%;
    }
    100%{
        right:100%;
    }
}

 

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
     <img src="imagenes/kangura.png" class="img-responsive" id="img4">

      <img src="http://via.placeholder.com/350x150" class="img-responsive" id="img5">

               <button class="animar">Entregar Corazón</button>

   </div>

＆＃13;

＆＃13;

＆＃13;