@downwindcss/easings
Một Tailwind CSS Preset để mở rộng các Transition Timing Function (easings).
Cách sử dụng
Sau khi bạn cài đặt và cấu hình (các bước dưới đây), bạn có thể truy cập các easings mới thông qua tiền tố ease-*.
Lưu ý : Hầu hết các easings có sẵn trong https://easings.net/ ngoại trừ một số vì bộ cài đặt sử dụng postcss-easings bên trong.
ease-in-back
ease-in-circ
ease-in-cubic
ease-in-expo
ease-in-out-back
ease-in-out-circ
ease-in-out-cubic
ease-in-out-expo
ease-in-out-quad
ease-in-out-quart
ease-in-out-quint
ease-in-out-sine
ease-in-quad
ease-in-quart
ease-in-quint
ease-in-sine
ease-out-back
ease-out-circ
ease-out-cubic
ease-out-expo
ease-out-quad
ease-out-quart
ease-out-quint
ease-out-sine
Cài Đặt
$ npm install --save-dev @downwindcss/easings
# Or using a short-form flag
$ npm install -D @downwindcss/easings
Sử dụng yarn.
$ yarn add --dev @downwindcss/easings
# or
$ yarn add -D @downwindcss/easings
Cấu Hình
Thêm bộ cài đặt, @downwindcss/easings vào tệp cấu hình Tailwind CSS, tailwind.config.js.
module.exports = {
presets: [require('@downwindcss/easings')],
// rest of configuration...
};
Ví dụ
Kiểm tra liên kết Chromatic (Storybook), https://www.chromatic.com/library?appId=603ee5eb3e3e1c00231fcf04&branch=main
Chi tiết tải về:
Tác giả: downwindcss
Nguồn: https://github.com/downwindcss/easings
Giấy phép: MIT license
