Sử dụng Hiệu ứng Chuyển tiếp trong Vue.js

Cú pháp cơ bản ========

<style>
    /* Lưu ý: 6 lớp chuyển tiếp này là tích hợp sẵn của Vue, do đó cần sử dụng đúng tên lớp mà Vue cung cấp */

    .chuyen-doi-ra {
      /* Xác định trạng thái bắt đầu của hiệu ứng ra */
      /* Chỉ tồn tại trong một khung hình */
      transform: translateX(-100px);
    }

    .chuyen-doi-ra-kich-hoat {
      /* Xác định quá trình hiệu ứng ra */
      transition: all 1.5s ease-in-out;
    }

    .chuyen-doi-ra-den {
      /* Xác định trạng thái kết thúc của hiệu ứng ra (tức là trạng thái mục tiêu mà hiệu ứng cần đạt được) */
      transform: translateX(-300px);
      opacity: 0;
    }

    /* Xác định hiệu ứng vào */

    .chuyen-doi-vao {
      /* Xác định trạng thái bắt đầu của hiệu ứng vào */
      transform: translateX(300px);
      opacity: 0;
    }

    .chuyen-doi-vao-kich-hoat {
      /* Xác định quá trình hiệu ứng vào */
      transition: all 2.5s ease-in-out;
    }

    .chuyen-doi-vao-den {
      /* Xác định trạng thái kết thúc của hiệu ứng vào */
      /* Chỉ tồn tại trong một khung hình */
      transform: translateX(0px);
    }
  </style>

<transition>
    <p v-show = "hienThi" v-bind:style = "doiTuongStyle">Ví dụ hiệu ứng</p>
</transition>

Hiệu ứng chuyển tiếp thực chất là một hiệu ứng mờ dần. Vue cung cấp 6 lớp để chuyển đổi khi hiển thị và ẩn phần tử:

v-enter: Xác định trạng thái bắt đầu của quá trình chuyển đổi vào. Hiệu lực trước khi phần tử được chèn vào, và bị xóa ở khung hình tiếp theo sau khi phần tử được chèn vào.
v-enter-active: Xác định trạng thái khi quá trình chuyển đổi vào đang diễn ra. Áp dụng trong suốt giai đoạn chuyển đổi vào, hiệu lực trước khi phần tử được chèn vào, và bị xóa sau khi chuyển đổi/hoạt ảnh hoàn tất. Lớp này có thể được dùng để định nghĩa thời gian, độ trễ và hàm bậc của quá trình chuyển đổi vào.
v-enter-to: phiên bản 2.1.8 trở lên Xác định trạng thái kết thúc của quá trình chuyển đổi vào. Hiệu lực ở khung hình tiếp theo sau khi phần tử được chèn vào (đồng thời v-enter bị xóa), và bị xóa sau khi chuyển đổi/hoạt ảnh hoàn tất.
v-leave: Xác định trạng thái bắt đầu của quá trình chuyển đổi ra. Hiệu lực ngay lập tức khi quá trình chuyển đổi ra được kích hoạt, và bị xóa ở khung hình tiếp theo.
v-leave-active: Xác định trạng thái khi quá trình chuyển đổi ra đang diễn ra. Áp dụng trong suốt giai đoạn chuyển đổi ra, hiệu lực ngay lập tức khi quá trình chuyển đổi ra được kích hoạt, và bị xóa sau khi chuyển đổi/hoạt ảnh hoàn tất. Lớp này có thể được dùng để định nghĩa thời gian, độ trễ và hàm bậc của quá trình chuyển đổi ra.
v-leave-to: phiên bản 2.1.8 trở lên Xác định trạng thái kết thúc của quá trình chuyển đổi ra. Hiệu lực ở khung hình tiếp theo sau khi quá trình chuyển đổi ra được kích hoạt (đồng thời v-leave bị xóa), và bị xóa sau khi chuyển đổi/hoạt ảnh hoàn tất.

2. Ví dụ về hiệu ứng chuyển tiếp CSS:


<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<style>
/* Có thể thiết lập các hiệu ứng vào và ra khác nhau */
/* Thiết lập thời gian và hàm hoạt ảnh */
.xoay-vao-xoay-ra-kich-hoat, .xoay-vao-xoay-ra-kich-hoat {
    transition: transform 3s, opacity 2s
}
.xoay-vao, .xoay-ra-den  {
    opacity: 0;
    transform: scale(0.5);
}
</style>
</head>
<body>
<div id = "dieu-khien">
<button v-on:click = "hienThi = !hienThi">Bấm vào đây!</button>
<transition name = "xoay-vao-xoay-ra">
    <p v-show = "hienThi" v-bind:style = "doiTuongStyle">Hiệu ứng hoạt ảnh</p>
</transition>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#dieu-khien',
    data: {
        hienThi: true,
        doiTuongStyle :{
            fontSize: '28px',
            color: 'blue'
        }
    },
    methods : {
    }
});
</script>
</body>
</html>

Plugin animate.css ===============

Animate.css là một bộ sưu tập các hiệu ứng hoạt ảnh được tạo bằng CSS3 animation bởi Daniel Eden. Nó có sẵn hơn 60 hiệu ứng hoạt ảnh như rung (shake), nhấp nháy (flash), nảy (bounce), lật (flip), xoay (rotateIn/rotateOut), mờ dần (fadeIn/fadeOut), v.v. Nói cách khác: Animate.css là một bộ sưu tập các hiệu ứng hoạt ảnh rất hay, thú vị, sành điệu và có thể hoạt động trên nhiều trình duyệt, có thể sử dụng trực tiếp trong dự án.

Địa chỉ: https://github.com/daneden/animate.css

Ứng dụng thực tế

Trong sử dụng thông thường, chỉ cần thêm lớp animated và lớp tương ứng vào phần tử


<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tài liệu</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
   　<style>
　　  　　.hop{height: 120px;width: 120px;background-color: lightgreen}
 　　</style>
</head>
　　 <body>
  　　 <div class="hop animated bounce"></div>
　　 </body>
</html>

Một số vấn đề khi kết hợp animate với chuyển tiếp

type="transition" //dùng để chọn thời gian hoạt ảnh là thời gian chuyển tiếp

:duration="8000" //tùy chỉnh thời gian hoạt ảnh

:duration="{vao:3000,ra:8000}" //thời gian hoạt ảnh vào và ra

Nội dung trên là tóm tắt học tập, vui lòng góp ý chỉ bảo~~

Thẻ: Vue.js CSS transition Animate.css animation Frontend Development

Đăng vào ngày 23 tháng 6 lúc 22:44

Thành phố Cuồng loạn

Sử dụng Hiệu ứng Chuyển tiếp trong Vue.js

2. Ví dụ về hiệu ứng chuyển tiếp CSS:

Ứng dụng thực tế

Thẻ Phổ Biến