使用 JavaScript 函數觸發 CSS 動畫

Question

我用 JavaScript 函數更新了一個 div 的內容，我想在每次加載新郵箱時在 div 上觸發動畫。

但是動畫會在重新加載時或當我從另一個 div 切換回來時觸發一次。 請注意，我通過調整每個div的display屬性來切換beetween divs 。

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));

  // By default, load the inbox
  load_mailbox('inbox');
}



function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase() + mailbox.slice(1)} </h3>`;

}

我編寫了動畫並將 div 鏈接到它，期望動畫將在每次函數調用時加載，而不是在頁面刷新時加載動畫。

#emails-view {
    position: relative;
    background-color: transparent;
    text-align: center;
    font-size: 20px;
    background-color:white;
    width: 100%;
    padding-bottom: 10px;
    border-radius: 15px;
}


@keyframes grow {
    0% { top: 0%;
        }
    30% {top: 50%;
    }
    100% {top: 0%;
    }
}

#emails-view {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
} 

HTML 是：

<hr>

<div id="emails-view">
</div>

<div id="mail-view" class="card">
    <div id="mail-header" class="card-header">
        <div style="font-weight:bold;" id='mail-sender'></div>
        <div style="font-weight:bold;" id='mail-receiver'></div>
    </div>
    <div id="card-body-1" class="card-body">
      <h5 style="font-weight:bold;" id="mail-subject" class="card-title"></h5>
      <p id="mail-time" class="card-text"></p>
      <a id="mail-button-reply" href="#" class="btn btn-primary">reply</a>
      <a id="mail-button-archive" href="#" class="btn btn-secondary">Archive</a>
    </div>
    <div id="card-body-2" class="card-body">
        <p style="font-size: 20px;" id="mail-content" class="card-text"></p>
    </div>

  </div>

<div id="compose-view">
    <h3>New Email</h3>
    <form id="compose-form">
        <div class="form-group">
            From: <input disabled class="form-control" value="{{ request.user.email }}">
        </div>
        <div class="form-group">
            To: <input id="compose-recipients" class="form-control">
        </div>
        <div class="form-group">
            <input style="font: bold; font-size: 30px;" class="form-control" id="compose-subject" placeholder="Subject">
        </div>
        <textarea style="font-size: 20px;" class="form-control" id="compose-body" placeholder="Body"></textarea>
        <input style="color: white;" id='compose-submit' type="submit" class="btn btn-primary" value="Send Mail"/>
    </form>
</div>

Answer 1

我終於找到了直接從 JavaScript animate方法為 div 設置動畫的修復程序。

我寫了一個函數來查找和應用動畫

function animate(view){
  element = document.querySelector('${view}').animate([
    // keyframes
    {opacity: '0'},
    {opacity : '1'}
  ],
  // timing options
  {
    duration:1000,

  })}

每次加載mailbox時我都會觸發該功能

function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';

  // animate current view
  animate('#emails-view')
}

Answer 2

我用 JavaScript 觸發 CSS 動畫的方法是將動畫附加到一個類：

.animate {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

然后使用 JS 將類添加到所選元素，同時從其他元素中移除

document.querySelector('#emails-view').classList.add('animate');

然后你可能想在動畫結束時刪除這個類

// notice we use `function` and not `() => {}`, it's more convenient
// in this case because it gives access to `this.classList`
document.querySelector('#emails-view').onanimationend = function() {
  this.classList.remove('animate');
}