使用Javascript和CSS製作事件觸發器的動畫

我是新的使用JavaScript和CSS，我目前正在嘗試使事件調用時觸發的小動畫。動畫很簡單，只會改變圖像的透明度。我的問題是，動畫只能在函數被調用時每隔一段時間工作。使用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（）時動畫都會發生？

來源

2017-05-25 Johanna

你是如何計劃觸發函數調用？如在哪個事件？ –

爲什麼這個問題UPvoted？它缺少解釋什麼時候你想要pulse（）函數觸發（點擊，懸停等） –

對不起。每次我使用addListener函數收到消息時都會調用pulse（）。這是一個應用程序，接收與LoRa通信的數據包。 – Johanna

您可以添加一個事件處理程序來處理動畫何時結束以移除該類。對於這個例子的目的，我已經改變了圖像的紅色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>

來源

2017-05-25 09:10:15 George

謝謝！現在它完美:) – Johanna

使用Javascript和CSS製作事件觸發器的動畫

回答

相關問題