动物

交叉浏览 CSS3 动画库,是一款动画.cs的端口,用于Vue.js过渡. 德莫尔

支持:

• 阴 2.x
• 变相 3.x
• 阿尔卑斯山.js

信贷

• @haydenbbbickerton (英语) 原为 vue-aniumate (低温) 作者(仅用于Vue 1.x).
• @pavels-hyuna (英语) 是 v2 SCSS 版本作者.

目录

• 动物
  • 信贷
  • 目录
  • 安装
  • 过渡
    • 自定义过渡类
    • 自定义动画属性
    • 幻灯片作为移动
  • 与阿尔平.js合作
  • 请求注意者
  • 选项
  • 贡献指南
    • 构建 Lib
    • 构建文档
    • 从动画.css同步

安装

国家预防机制

npm i @asika32764/vue-animate --save

yarn add @asika32764/vue-animate

光盘N

<link rel="stylesheet" href="https://www.unpkg.com/@asika32764/vue-animate/dist/vue-animate.min.css"/>

导入

为JS Bundler导入动画.

import '@asika32764/vue-animate/dist/vue-animate.css';

导入 CSS 或 SCSS 文件 .

@import "@asika32764/vue-animate/dist/vue-animate.css";

/* If you want to override CSS variables, write it just after importing */
:root {
  --animate-duration: .3s;
  --animate-delay: 0;
}

过渡

使用 Vue.js 过渡 但是对于过渡名称,您会使用其中的一种 动画 删除 页:1 animate__ 财务报告和审定财务报表 in/Out 从名字.

例如,如果想要使用 animate__animated animate__fadeInLeft 财务报告和审定财务报表 animate__fadeInLeft 你可以写:

<TransitionGroup name="fadeLeft" tag="ul">
    <li v-for="item in items" :key="item.id">
        {{ item }}
    </li>
</TransitionGroup>

已写入样式表, 所以只需删除 In/Out 从名字,你是黄金.

自定义过渡类

Animate.css的原始类名在出入口过渡时得到支持. 所以,如果你要使用 自定义过渡类,可以添加 -进入/休假 改为各班:

<Transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</Transition>

或者使用常规 内出 语法 :

<Transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

自定义动画属性

<Transition name="fade">
  <p v-if="show" 
    style="--animate-duration: 0.3s; --animate-delay: 150; --animate-direction: reverse;"
  >hello</p>
</Transition>

幻灯片作为移动

观点要素必须确定绝对位置.

<Transition
    enter-active-class="position-absolute slideInRight"
    leave-active-class="position-absolute slideOutLeft">
    <router-view :key="path"></router-view>
</transition>

与阿尔平.js合作

阿尔卑斯山 x-transition 必须添加 enter 财务报告和审定财务报表 leave 后缀,必须添加 In 财务报告和审定财务报表 Out 动画名后的后缀.

<div x-show="open"
    x-transition:enter="fadeIn"
    x-transition:leave="fadeOut"
    style="animation-duration: .3s"
>...</div>

另见: https://github.com/alpinejs/alpine#x-过渡

请求注意者

为了使用"注意",vue-animate.css提供一套JS功能.

import { bounce } from '@asika32764/vue-animate';
import { ref } from 'vue';

const el = ref<HTMLElement>();

bounce(el.value);

• 德莫尔
• 可用的注意请求者

选项

您可以在以下参数中添加动画属性 .

bounce(el.value, 300); // Durations 300ms
bounce(el.value, '.3s'); // Durations 0.3seconds
bounce(el.value, 300, { delay: 200 }); // Add duration and delay
bounce(el.value, { duration: 300, delay: 200 }); // Add duration and delay by options object

贡献指南

克隆人计划并安装道克.

git clone [email protected]:asika32764/vue-animate.git
cd vue-animate
yarn install

运行 :

yarn dev

将启动源文件所在文件站点的 Vite dev 服务器 src/docs。 。 。 . 您可以修改此网站以测试您的代码 。 (不要按你测试代码。 )

构建 Lib

运行此命令以构建 /dist 文档.

rollup -c

构建文档

运行此命令以构建 /docs 文档.

yarn build:docs

从动画.css同步

这个项目是自动转换自动画.css动画, 如果动画.css发布新的动画, 您可以运行此命令以同步动画和自动生成源文件.

yarn generate