Animate element after jQuery append

Hướng dẫn cách thêm hiệu ứng màu vào phần tử HTML vừa được thêm vào bằng jQuery append hoặc prepend

Trong quá trình tranh thủ đi làm "đá ngoài" mua ít sữa cho cháu, mình có nhận được yêu cầu có thể tóm gọn lại như sau.

• Nhận dữ liệu được trả về liên tục sau mỗi 3 giây
• Fill data đó vào một bảng, mỗi data sẽ tương ứng với một dòng
• Khi dòng đó được thêm vào thì tạo hiệu ứng để người dùng biết vừa có thêm dữ liệu mới
• Dòng mới xuất hiện phải luôn ở dưới cùng và thanh cuộn cũng ở dưới

HTML

  <div class="page-order-content">
    <div class="data-view">
      <div class="data-content">
        <div class="head">
          <div class="raw">
            <div class="unit">STT</div>
            <div class="unit">Name</div>
            <div class="unit">Phone</div>
            <div class="unit">Email</div>
            <div class="unit status">Status</div>
          </div>
        </div>
        <div id="body-wrapper">
          <div class="body" id="data-body">
            <!-- append data here -->
          </div>
        </div>
      </div>
    </div>
  </div>
  

CSS

  body {background: #f5f5f5;margin: 0;padding: 0;}
  .page-order-content {height: 100vh;padding: 20px 20px;}
  .page-order-content .data-view {background: #fff;border: 1px solid #ddd;height: calc(100vh - 40px);position: relative;padding: 20px 20px;}
  .page-order-content .data-view .data-content .head {margin-right: 17px;}
  .page-order-content .data-view .data-content .head .raw {font-weight: bold;border: 1px solid #ccc;display: flex;}
  .page-order-content .data-view .data-content #body-wrapper {overflow-y: auto;overflow-x: hidden;height: calc(100vh - 120px);}
  .page-order-content .data-view .data-content #body-wrapper .raw {border: 1px solid #ccc;border-top: none;display: flex;animation: append 3s ease;}
  .page-order-content .data-view .data-content .raw .unit {flex: 2;padding: 10px 5px;border-right: 1px solid #ccc;}
  .page-order-content .data-view .data-content .raw .unit.status {flex: 1;border-right:none;}
  @keyframes append {
    0% {background: #91c3ec;}
    100% {background: #fff;}
  }
  

Ở phần CSS lưu ý là mình có add thêm bootstrap.min.css còn animation append để tạo hiệu ứng chuyển màu nhạt dần và chuyển động diễn ra trong vòng 3 giây

jQuery

  jQuery(document).ready(function($) {
    const row_data = `
    <div class="raw">
      <div class="unit">STT</div>
      <div class="unit">Name</div>
      <div class="unit">Phone</div>
      <div class="unit">Email</div>
      <div class="unit status">Status</div>
    </div>`
    setInterval(function() {
      $('#data-body').append(row_data)
      $('#body-wrapper').scrollTop($('#data-body').height())
    }, 3000)
  });
  

Ở đây mình sử dụng jQuery setInterval để giả lập việc nhận data sau mỗi 3 giây, tiếp theo là sử dụng append để fill data vào thẻ HTML, việc tiếp theo để thanh cuộn luôn ở dưới cùng thì mình sử dụng scrollTop là xong.

Demo