我想在用戶單擊影像時為影像輸入設定影片，我正在使用animate.cssBootstrap 和 Angular，我已經看到了一些示例來在單擊影像時添加影片類，但是當我 console.log 元素時沒有任何反應在函式中我可以看到添加了影片類但沒有作業，我在控制臺中也收到了一條錯誤訊息。
html代碼
<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft" id="offMenu" (click)="animateLogo()">
TS代碼
animateLogo(){
const element = document.querySelector('#offMenu');
if(element) {
element.classList.add('animate__animated', 'animate__bounceOutRight');
console.log(element)
}
}
正如您在輸入類中看到的，添加了影片類“animate__bounceOutRight”，但在我的專案中沒有任何反應，對此有何建議？
所以在回答之后我發現錯誤訊息是因為引導程式，與影片無關，問題是因為輸入已經有影片，當函式添加另一個時，這個重疊并且沒有使它作業所以我需要禁用第一個以使第二個作業，但現在輸入因第二個影片而消失
HTML
<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft" id="offMenu" [ngClass]="{'animate__slideInLeft ': firstAnimation , 'animate__bounceOutRight': secondAnimation }" (click)="animateLogo()">
TS
firstAnimation: boolean; //This is true
secondAnimation: boolean; //This is false
animateLogo(){
this.firstAnimation = false
this.secondAnimation = true
}
uj5u.com熱心網友回復：
你有沒有animate.css在你的
angular.json
"styles": [
"node_modules/animate.css/animate.css"
],
或者
styles.css：
@import '~animate.css/animate.min'
也只是為了更好的方法，讓我們嘗試以 Angular 方式解決您的問題
在您.ts創建一個名為的布爾欄位activateAnimation，我們將其設定為true用戶單擊影像時，因此您的 .ts 代碼將如下所示：
activateAnimation: boolean;
animateLogo(): void {
this.activateAnimation = true
}
然后在您的 HTML 中，我們可以使用Angularanimate.css的指令有條件地添加您想要添加的類。[ngClass]
<input type="image" src="../../../assets/img/as-logo-150dpi-05.png"
class="d-block animate__animated animate__slideInLeft"
[ngClass]="{'animate__animated ': activateAnimation , 'animate__bounceOutRight': activateAnimation }" id="offMenu"
(click)="animateLogo()">```
uj5u.com熱心網友回復：
好的，經過一番研究，我找到了一個視頻，解釋了如何Animate.css使用jQuery和使用他通過點擊事件解釋的功能，我設法取出第一個影片類，添加第二個影片類，一旦影片結束，取出第二個影片類并再次添加第一個影片類，所有這些都在 TS 檔案中，在 TS 檔案中編碼 jQuery 時存在一些問題，但框架幫助我使用正確的代碼形式
所以首先在我<input>添加了class offMenu標識我的輸入，我也離開了animate__animated所以我每次取出或添加影片類時都不必添加它，我也離開了，animate__slideInLeft因為我想input在第一次加載頁面時制作影片.
<input type="image" src="../../../assets/img/as-logo-150dpi-05.png" class="d-block animate__animated animate__slideInLeft offMenu" id="offMenu">
接下來在建構式部分的 TS 檔案中，我撰寫 jQuery 函式，創建 3 個變數：
- 第一個是
effects這個變數保存了第二個效果，即animate__bounceOutRight. - 第二個變數是
effectsEnd保存不同的類，Animate.css 必須為不同的瀏覽器檢測影片何時結束。 - 第三個是保存我要添加或洗掉類的元素，在這種情況下是我
input的class offMenu. - 如果您想再添加一個變數來保存您當前擁有的影片類，您可以這樣做。
接下來我選擇要添加和洗掉類on click的元素并在函式中再次呼叫事件我選擇元素并洗掉第一個影片類'animate__slideInLeft'，因為這個影片已經結束，不需要添加effectsEnd變數，接下來我添加第二個影片類保存在我的變數effects中，然后one我們指出這將發生一次，并檢查影片以在影片結束后以變數effectsEnd結束，我們洗掉影片類effects并添加第一個影片類。
constructor() {
$(() =>{
var effects = 'animate__bounceOutRight';
var effectsEnd = 'animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd';
var element = $('input.offMenu');
$(element).on("click", () => {
$(element).removeClass('animate__slideInLeft').addClass(effects).one(effectsEnd, () =>{
$(element).removeClass(effects).addClass('animate__slideInLeft')
});
});
})
}
使用此代碼，您可以放置??一個影片來顯示頁面加載時，然后在單擊元素時添加另一個影片，并在完成影片后收回元素，希望這對其他人有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/421945.html
標籤：
上一篇：顏色漸變呈現為黑色