使用Javascript和CSS制作事件触发器的动画

Question

我是新的使用JavaScript和CSS，我目前正在尝试使事件调用时触发的小动画。动画很简单，只会改变图像的透明度。我的问题是，动画只能在函数被调用时每隔一段时间工作。

每次我想动画发生时都会调用一个名为“pulse（）”的函数。

<script> 
    function pulse() { 
     $('.transform').toggleClass('transform-active'); 
    } 
</script> 

的CSS是这样的：

.lock-image { 

} 

.transform { 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

.transform-active { 
    /*animation-delay: 2s;*/ 
    animation-iteration-count: 1; 
    animation: pulse 0.5s; 
    animation-direction: alternate; 
} 


@keyframes pulse { 
    0% { 
    opacity: 1; 
    } 
    50%{ 
    opacity: 0.3; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

上的动画做的是这样做的图像;

<div class="lock-image transform"> 
    <img id="myImage" src="pic_locked.png" class="img-responsive " style="display:inline" alt="Lock" width="100" height="80"> 
    </div> 

如何更改代码，以便每次调用函数pulse（）时动画都会发生？

Answer 1

您可以添加一个事件处理程序来处理动画何时结束以移除该类。对于这个例子的目的，我已经改变了图像的红色DIV

function pulse() { 
 
    $('.transform').addClass('transform-active'); 
 
} 
 

 
$('.transform').on('webkitAnimationEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() { 
 
    $(this).removeClass('transform-active'); 
 
})

#myImage { 
 
    display: block; 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 80px; 
 
} 
 

 
.transform { 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    -ms-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
.transform-active { 
 
    /*animation-delay: 2s;*/ 
 
    animation-iteration-count: 1; 
 
    animation: pulse 0.5s; 
 
    animation-direction: alternate; 
 
} 
 

 
@keyframes pulse { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    50% { 
 
    opacity: 0.3; 
 
    } 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="lock-image transform"> 
 
    <div id="myImage"></div> 
 
</div> 
 
<br/> 
 
<button type="button" onclick="pulse()">Pulse</button>