vue flip_精彩的react-flip-toolkit的Vue.js端口

vue flip

vue-flip-toolkit (vue-flip-toolkit)

A Vue.js port of the wonderful react-flip-toolkit, developed by @aholachek.

由@aholachek开发的精彩的react-flip-toolkit的Vue.js端口。

View demo 查看演示 Download Source 下载源

快速开始 (Quick Start)

yarn add vue-flip-toolkit

Wrap the components you wish to animate with a single Flipper component that has a flipKey prop. This prop must change every time you want an animation to happen.

总结要制作具有单一的组件Flipper ，有一个组件flipKey道具。 每当您希望动画发生时，此道具都必须更改。

Wrap elements that should be animated with Flipped components that have a flipId prop matching them across renders.

包装应使用Flipped组件动画的元素，该组件具有在渲染之间匹配它们的flipId 。

A basic example can be found here: https://codesandbox.io/s/m354w1mmp9

一个基本的例子可以在这里找到： https : //codesandbox.io/s/m354w1mmp9

为什么还要将此移植到Vue.js？ (Why even port this to Vue.js?)

Fair question. In developing my own library, vue-overdrive, I've felt the pain of not being able to find a declarative library for animating a given DOM element between two states. Upon discovering react-flip-toolkit, which has a first-class "core" API that can be used outside of React, I wanted to take a crack at using it to re-implement vue-overdrive. The fruit of my attempt is the following library, vue-flip-toolkit.

公平的问题。 在开发自己的库vue-overdrive ，我感到无法为两个状态之间的给定DOM元素设置动画的声明式库很痛苦。 发现具有可在React外部使用的一流“核心” API的react-flip-toolkit ，我想尝试使用它重新实现vue-overdrive 。 我尝试的结果是下面的库vue-flip-toolkit 。

这个图书馆里有什么？ (What's in this library?)

This library strives to imitate its parent, react-flip-toolkit, as closely as possible. It thus exports the following two components that you can use in your Vue applications. For the sake of brevity, I've lifted descriptions/verbiage from the README of react-flip-toolkit, indicated via blockquotes.

该库致力于尽可能模仿其父级react-flip-toolkit 。 因此，它将导出可在Vue应用程序中使用的以下两个组件。 为了简洁起见，我从react-flip-toolkit的README中提取了描述/详细信息，并通过blockquotes进行了指示。

Flipper.vue (Flipper.vue)

The parent wrapper component that contains all the elements to be animated. You'll most typically need only one of these per page. Read more –>

父包装器组件，其中包含要设置动画的所有元素。 每页通常只需要其中之一。 阅读更多–>

Props

道具

prop	default	type	details
className	–	string	A class that will apply to the div rendered by Flipper
flipKey (required)	–	string, number, boolean	Changing this tells vue-flip-toolkit to transition child elements wrapped in Flipped components.
spring	"noWobble"	string, object	Provide a string or referencing one of the spring presets — noWobble, veryGentle, gentle, wobbly, or stiff. Otherwise, pass a custom spring object
staggerConfig	{}	object	Provide configuration for staggered Flipped children.

Struts	默认	类型	细节
className	–	string	适用于Flipper渲染的div的类
flipKey (必填)	–	string, number, boolean	更改此设置将告诉vue-flip-toolkit转换包装在Flipped组件中的子元素。
spring	"noWobble"	string, object	设置弹簧预设的字符串或引用一个- noWobble ， veryGentle ， gentle ， wobbly ，或stiff 。 否则，传递一个自定义弹簧对象
staggerConfig	{}	object	为交错的翻转儿童提供配置。

翻转 (Flipped.vue)

Wraps an element that should be animated.

包装应设置动画的元素。

Props

道具

prop	default	type	details
flipId (required)	–	string	Use this to tell vue-flip-toolkit how elements should be matched across renders so they can be animated.
inverseFlipId	–	string	Refer to the id of the parent Flipped container whose transform you want to cancel out. If this prop is provided, the Flipped component will become a limited version of itself that is only responsible for cancelling out its parent transform. It will read from any provided transform props and will ignore all other props (besides inverseFlipId.)
stagger	–	string	Provide a natural, spring-based staggering effect in which the spring easing of each item is pinned to the previous one's movement. If you want to get more granular, you can provide a string key and the element will be staggered with other elements with the same key.
shouldInvert	–	function	A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean indicating whether to apply inverted transforms to all Flipped children that request it via an inverseFlipId.
shouldFlip	–	function	A function provided with the current and previous decisionData props passed down by the Flipper component. Returns a boolean to indicate whether a Flipped component should animate at that particular moment or not.
opacity	false	boolean
scale	false	boolean	Tween scaleX and scaleY
translate	false	boolean	Tween translateX and translateY

Struts	默认	类型	细节
flipId (必填)	–	string	使用它来告诉vue-flip-toolkit如何在渲染之间匹配元素，以便可以对其进行动画处理。
inverseFlipId	–	string	请参阅要取消其转换的父Flipped容器的ID。 如果提供了此道具，则Flipped组件将成为其自身的受限版本，仅负责取消其父级变换。 它将从提供的任何转换道具中读取，并且将忽略所有其他道具( inverseFlipId 。
stagger	–	string	提供自然的，基于弹簧的交错效果，其中，每个项目的弹簧缓动都固定在前一个项目的移动上。 如果要更细化，可以提供一个字符串键，该元素将与具有相同键的其他元素错开。
shouldInvert	–	function	设置有当前和先前的函数decisionData通过翻转部件传下来的道具。 返回一个布尔值，该布尔值指示是否对所有通过inverseFlipId请求的Flipped子级应用反向变换。
shouldFlip	–	function	由Flipper组件传递的当前和先前的Flipper道具提供的函数。 返回一个boolean以指示Flipped组件是否应在该特定时刻进行动画处理。
opacity	假	boolean
scale	假	boolean	补间scaleX和scaleY
translate	假	boolean	补间translateX和translateY

Events

大事记

eventName	args	details
@on-start	{el: DOMElement, id: String}	Emitted when the flipped animation begins.
@on-complete	{el: DOMElement, id: String}	Emitted when the flipped animation begins.

eventName	args	细节
@启动	{el: DOMElement, id: String}	flipped动画开始时flipped 。
@完成	{el: DOMElement, id: String}	flipped动画开始时flipped 。

太酷了，该如何使用？ (Cool, so how do I use it?)

Install the library

安装库

yarn add vue-flip-toolkit

Import the respective components.

导入相应的组件。

import { Flipper, Flipped } from "vue-flip-toolkit";

Register the components.

注册组件。

// Example.vue
<script>
export default {
  components: {
    Flipped,
    Flipper
  }
};
</script>

好，下面是一些例子。 (OK, time for some examples.)

You got it.

你说对了。

1)简单，扩展的Div动画 (1) Simple, Expanding Div Animation)

Source

资源

2)两个Divs (2) Two Divs)

Source

资源

3)列表随机播放动画 (3) List Shuffle Animation)

Source

资源

4)高级手风琴 (4) Advanced Accordion)

Source Fantastic Tutorial

源 奇妙教程

5)缩放动画+ Anime.js (5) Scale Animation + Anime.js)

Source

资源

6)灵感来自材料设计的动画 (6) Material Design inspired animation)

Source

资源

7)Vue路由器示例 (7) Vue Router Example)

This example is very much a WIP. Nonetheless, it illustrates at a high-level how to use vue-flip-toolkit with vue-router, as well as hook into the @on-complete and @on-start events.

这个例子是一个在制品。 尽管如此，它还是从高层次上说明了如何将vue-flip-toolkit与vue-router ，以及如何连接到@on-complete和@on-start事件。

Source

资源

下一步是什么？ (What's next?)

A lot.

很多。

Primarily, I want to make sure that this basic set of functionality works for Vue developers, and that the API makes sense.

首先，我想确保该基本功能集适用于Vue开发人员，并且该API有意义。

Once we check that box, I'd like to add support for additional props for both Flipped and Flipper. Right now, you can't do too too much with them.

选中该框后，我想添加对Flipped和Flipper其他道具的支持。 现在，您不能对他们做太多 。

翻译自: https://vuejsexamples.com/a-vue-js-port-of-the-wonderful-react-flip-toolkit/

vue flip