vuejs加载顺序_Vuejs插件，用于创建史诗般的顺序动画入口

vuejs加载顺序

顺序进入 (vue-sequential-entrance)

Vuejs Plugin for creating epic sequential animation entrances with a list of elements. Zero effort. Really lightweight.

Vuejs插件，用于创建具有元素列表的史诗般的顺序动画入口。 零努力。 真正的轻巧。

View demo 查看演示 Download Source 下载源

安装 (Installation)

In order to use into your vue project

为了在您的vue项目中使用

npm install vue-sequential-entrance

使用方法(全局用法) (How to use ( Global Usage ))

Add to your main.js file

添加到您的main.js文件

import SequentialEntrance from 'vue-sequential-entrance'
import 'vue-sequential-entrance/vue-sequential-entrance.css'
Vue.use(SequentialEntrance);

And now, in your component file, wrap a list of elements with sequential-entrance tag

现在，在您的组件文件中，使用顺序进入标记包装元素列表

<template>
  <sequential-entrance>
    <div class="box" v-for="app in apps" :key="app">{{ app }}</div>
  </sequential-entrance>
</template>

Sequential Entrance comes with four 'flavors': animation entrance from Top, from right, from left and from bottom. By default, it uses from right, but you can select what you want this way:

顺序入口带有四个“样式”：从顶部，从右，从左和从底部的动画入口。 默认情况下，它从右开始使用，但是您可以通过以下方式选择所需内容：

<sequential-entrance fromTop> [...] </sequential-entrance>

  <sequential-entrance fromRight> [...] </sequential-entrance>

  <sequential-entrance fromBottom> [...] </sequential-entrance>

  <sequential-entrance fromLeft> [...] </sequential-entrance>

使用以下道具进行自定义 (Customize with the following Props)

延迟 (delay)

By default, the sequence animation have an interval of 250 milliseconds. If you need a faster or slower entrance animation, you can specify the time in milliseconds.

默认情况下，序列动画的间隔为250毫秒。 如果需要更快或更慢的入口动画，则可以指定时间(以毫秒为单位)。

<sequential-entrance delay="1000"> [...] </sequential-entrance>

动画 (animation)

If you prefer don't use the built in animations (fromTop,fromRight,fromLeft,fromBottom) and use your custom css animation, you can easily using 'animation' props. Simply, put the class name of your animation and that's it.

如果您不想使用内置的动画(fromTop，fromRight，fromLeft，fromBottom)，而是使用自定义CSS动画，则可以轻松使用“动画”道具。 只需简单地输入动画的类名即可。

<sequential-entrance animation="myCustomAnimationClassName"> [...] </sequential-entrance>

Even you can use css animation libraries like animate.css ( https://daneden.github.io/animate.css/ ). Import the entire css library or only the ones that you are going to use and type the class name in animation prop.

甚至您也可以使用animate.css( https://daneden.github.io/animate.css/ )之类CSS动画库。 导入整个CSS库或仅导入要使用CSS库，然后在animation prop中输入类名称。

<sequential-entrance animation="bounceIn"> [...] </sequential-entrance>

标签 (tag)

By default, sequential-entrance render a 'span' tag wrapping its children, but you can customize the wrapper tag through 'tag' prop

默认情况下，顺序入口会渲染一个“ span”标签，包装其子标签，但您可以通过“ tag”属性自定义包装标签

<sequential-entrance tag="section"> [...] </sequential-entrance>

翻译自: https://vuejsexamples.com/vuejs-plugin-for-creating-epic-sequential-animation-entrances/

vuejs加载顺序