vue-keyframes的简介及使用教程

vue-keyframes是一个基于Vue.js的模拟命令行效果的动画组件。

安装

Npm

npm i vue-keyframes

Yarn

yarn add vue-keyframes

引入并注册

import {Keyframes} from 'vue-keyframes';
Vue.use(Keyframes);

用法

<keyframes loop="true">
    <p duration="500">Hi World</p>
    <p duration="1000">How's it going ?</p>
    <p duration="500">See ya.</p>
</keyframes>

<keyframes>组件

属性	描述
loop	如果设置为`true`，组件将无限重复播放。默认：`false`
delay	定义动画之前的延时时间。默认： 0
component	定义`<keyframes>`组件渲染后的元素（支持标准HTML元素和Vue组件）。默认：`div`
auto-run	是否自动运行。默认：`true`
on-animate	动画开始时的回调函数。默认：`false`
on-end	动画结束时的回调函数

子组件

属性	描述
duration	定义元素的显示时间。默认： 200
freeze	如果定义为true，该显示后不会被删除。