- Há»c Vue
-
HỠsinh thái
HỠtrợ
Công cụ
ThÆ° viá»n chÃnh thức
Tin tức
Tà i nguyên
- Äá»i ngÅ©
- HỠtrợ Vue
- Ngôn ngữ
HÆ°á»ng dẫn
Khái niá»m cÆ¡ bản
- Cà i Äặt
- Giá»i thiá»u
- Äá»i tượng Vue
- Cú pháp template
- Computed property và watcher
- Binding cho class và style
- Render theo Äiá»u kiá»n
- Render danh sách
- Xá» là sá»± kiá»n
- Rà ng buá»c form input
- Cơ bản vỠcomponent
Components In-Depth
- ÄÄng kà Component
- Props
- Custom Events
- Slots
- Dynamic & Async Components
- Handling Edge Cases
Hiá»u ứng chuyá»n Äá»ng
- Transition cho enter/leave & danh sách
- Transition cho trạng thái
Tái sỠdụng & kết hợp
- Mixin
- Directive tùy biến
- Các hà m render & JSX
- Plugin
- Filter
Công cụ
- Triá»n khai cho môi trÆ°á»ng production
- Single File Components
- Unit test
- TypeScript Support
Má» rá»ng quy mô ứng dụng
- Routing
- Quản là trạng thái
- Render á» phÃa server
Bên trong Vue
- Reactivity in Depth
Thông tin thêm
- Comparison with Other Frameworks
- Join the Vue.js Community!
- Äá»i ngÅ©
Transition cho trạng thái
Há» thá»ng transition của Vue cung cấp nhiá»u cách Äá» animate enter/leave và danh sách, nhÆ°ng còn vá» animation cho chÃnh dữ liá»u thì sao? Và dụ:
- các con sá» và phép tÃnh
- mà u sắc Äược hiá»n thá»
- vỠtrà của các node SVG
- kÃch cỡ và các thuá»c tÃnh khác của các phần tá» web
Tất cả những thông tin nà y Äá»u hoặc Äã Äược lÆ°u trữ sẵn dÆ°á»i dạng sá» liá»u, hoặc có thá» Äược chuyá»n Äá»i thà nh sá» liá»u. Má»t khi là m váºy, chúng ta có thá» animate những thay Äá»i trạng thái nà y bằng cách dùng những thÆ° viá»n bên thứ ba, kết hợp vá»i há» thá»ng phản ứng (reactivity) và component của Vue.
Animate cho trạng thái bằng watcher
Watcher cho phép chúng ta animate các thay Äá»i từ bất kì thuá»c tÃnh dạng sá» nà o sang má»t thuá»c tÃnh khác. Äiá»u nà y nói má»t cách trừu tượng thì nghe có vẻ phức tạp, vì thế chúng ta hãy xem má»t và dụ vá»i Greensock:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script> |
new Vue({ |
{{ animatedNumber }}
Khi bạn cáºp nháºt con sá» trong input trên Äây, thay Äá»i sẽ Äược animate. Và dụ nà y khá á»n, nhÆ°ng nếu dữ liá»u không phải là má»t con sá» trá»±c tiếp mà là má»t cái gì Äó khác, và dụ nhÆ° mà u CSS thì sao? DÆ°á»i Äây là má»t cách thá»±c hiá»n Äiá»u nà y khi tÃch hợp vá»i Tween.js và Color.js:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
var Color = net.brehaut.Color |
.example-7-color-preview { |
{{ tweenedCSSColor }}
Transition Äá»ng cho trạng thái
CÅ©ng giá»ng nhÆ° component transition của Vue, transition cho dữ liá»u cÅ©ng có thá» Äược cáºp nháºt trong thá»i gian thá»±c (real time), và viá»c nà y Äặc biá»t hữu Ãch khi tạo các prototype (bản thá» nghiá»m, khuôn mẫu). Ngay cả khi sá» dụng má»t Äa giác SVG ÄÆ¡n giản, bạn cÅ©ng có thá» Äạt Äược nhiá»u hiá»u ứng mà nếu không sá» dụng transition bạn có thá» sẽ phải tá»n kha khá thá»i gian thá» Äi thá» lại má»i tÆ°á»ng tượng ra Äược.
Äây là code hoà n thiá»n của demo trên.
Sắp xếp transtion và o component
Quản là nhiá»u transition cho trạng thái có thá» là m Äá» phức tạp của má»t Äá»i tượng hoặc component Vue tÄng lên má»t cách nhanh chóng. May thay, nhiá»u animation có thá» Äược trÃch xuất ra thà nh các component con chuyên dụng. Chúng ta hãy thá» là m chuyá»n nà y vá»i và dụ animate sá» nguyên á» trên:
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script> |
// Giá» thì logic tween phức tạp nà y có thá» Äược dùng lại giữa |
Bên trong các component con, chúng ta có thá» kết hợp bất kì kÄ© thuáºt transition nà o Äã Äược bà n Äến trên trang nà y vá»i các kÄ© thuáºt Äược há» thá»ng transition có sẵn của Vue cung cấp. Vá»i hai công cụ nà y, tháºt sá»± những Äiá»u chúng ta không là m Äược là rất Ãt.
Là m cho thiết kế trá» nên sinh Äá»ng
Theo má»t Äá»nh nghÄ©a, animate nghÄ©a là â(là m gì Äó) trá» nên sinh Äá»ng.â Tiếc thay, các icon, logo và mascot (linh váºt) thÆ°á»ng chá» Äược tạo ra dÆ°á»i dạng hình ảnh hoặc SVG tÄ©nh. Vì váºy tuy mang hình ảnh các con váºt, octocat của GitHub hay con chim của Twitter không thá»±c sá»± sá»ng Äá»ng.
Vue có thá» giúp bạn. Vì SVG thá»±c chất chá» là dữ liá»u, chúng ta chá» cần biết các sinh váºt nà y trông nhÆ° thế nà o khi hứng khá»i, khi Äang suy nghÄ©, hoặc khi sợ hãi. Sau Äó Vue có thá» giúp transition giữa các trạng thái nà y và là m cho ứng dụng của bạn trá» nên sinh Äá»ng hÆ¡n.
Kết hợp giữa các thay Äá»i trạng thái theo hÆ°á»ng tÆ°Æ¡ng tác và tÃnh toán thá»i gian, Sarah Drasner minh há»a cho Äiá»u nà y trong demo dÆ°á»i Äây:
See the Pen Vue-controlled Wall-E by Sarah Drasner (@sdras) on CodePen.