animate⽤法js原⽣_Vue.js的幻灯⽚框架——Eagle.js
介绍
Eagle.js是⼀个基于Vue.js的幻灯⽚框架，可以⽤来制作⽹页幻灯⽚，幻灯⽚不⼀定是PPT，可以作为⽹页演⽰的基础框架，因为其公开左右的API，那么你可以⾃⼰改造来实现更加强⼤的功能，⽀持⽤于Web演⽰的动画，主题，交互式⼩部件等！
Github
相关特性
幻灯⽚系统建⽴在Vue.js之上
⽀持动画，主题，交互式⼩部件(⽤于Web演⽰)
在演⽰⽂稿中轻松重⽤组件，幻灯⽚和样式
轻量级核⼼模块和各种有⽤的扩展
所有API公开，最⼤可改造性
最重要的是，eagle.js的⽬标是提供⼀个简单且⾮常易于改造的API，这样你就可以摆脱常规，制作出你真正想要的幻灯⽚。
DEMO预览
你可以直接使⽤作者提供的demo仓库进⾏预览
git clone github/Zulko/eaglejs-demo.git
安装依赖项：
cd eaglejs-demonpm install
作者也提供了在线预览的DEMO，通过Gif⼀起来看⼀看：
预览效果查看官⽹在线DEMO更好！
安装使⽤
安装
npm install --save eagle.js
或者
yarn add eagle.js
使⽤
Eagle.js是⼀个vue插件。需要在vue应⽤程序的主⽂件中使⽤eagle.js.
import Eagle from 'eagle.js'// import animate.css for slide transition import 'animate.css'Vue.use(Eagle)
最基本的⽤法
Eagle.js的基本组件是幻灯⽚和幻灯⽚。使⽤幻灯⽚作为mixin来编写幻灯⽚组件，其中可能包含多个幻灯⽚。幻灯⽚显⽰的⼀个⾮常基本的单个⽂件组件如下所⽰：
slide(:steps="4") p(v-if="step >= 1") | {{step}} p(v-if="step >= 2") | {{step}} p(v-if="step >= 3") | {{step}} p(v-if="step >= 4") | {{step}}
默认
默认情况下，幻灯⽚显⽰会逐步导航，但您可以将⾏为更改为基于幻灯⽚：因此，如果您返回上⼀张幻灯⽚，则会转到第⼀步⽽不是最后⼀步。查看对⽐：
Widgets
Eagle.js提供了⼏个可以在幻灯⽚中使⽤的有⽤⼩部件：
1. eg-modal
2. eg-code-block (code highlighted by highlight.js)
3. eg-code-comment
transition用法搭配
4. eg-toggle
5. eg-radio-button
6. eg-triggered-message
import Eagle, { Modal, CodeBlock } from 'eagle.js'Eagle.use(Modal)Eagle.use(CodeBlock)
Presenter插件
可以使⽤presenter插件启⽤演⽰者模式：
// first, use plugin in your entry fileimport Eagle, {Presenter} from eagle.jsEagle.use(Presenter, { presenterModeKey: 'a' // default is p})// second, in your slid 除以上介绍以外，你可以直接到Github查看详细的介绍以及使⽤⽅式，本⽂不做过多介绍！
总结
Eagle.js是⼀个⾼度⾃制的幻灯⽚框架，你可对其进⾏加强和改造，可以作为⽹页幻灯⽚的⼀个基础框架，有需要的朋友可以学习和使⽤！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。