vue 页面过渡动画翻转_具有良好过渡效果的翻转元素的组件

vue 页面过渡动画翻转

老虎夹 (vue-flipper)

A component to flip elements with a nice transition.

一个具有良好过渡的翻转元素的组件。

View demo 查看演示 Download Source 下载源

• :zap: It is really small, JavaScript + CSS (min + gzip) is smaller than 1KB

  ：zap：确实很小，JavaScript + CSS(最小+ gzip)小于1KB

• :art: CSS uses Stylus + BEM + Autoprefixer

  ：art：CSS使用Stylus + BEM + Autoprefixer

• :package: There are ESM, CommonJS and UMD distributions

  ：package：有ESM，CommonJS和UMD发行版

You can se by youself on Codepen or CodeSandbox.

您可以在Codepen或CodeSandbox上自行 设置 。

安装 (Installation)

This library is published in the NPM registry and can be installed using any compatible package manager.

该库在NPM注册表中发布，可以使用任何兼容的程序包管理器进行安装。

npm install vue-flipper --save

# For Yarn, use the command below.
yarn add vue-flipper

用法 (Usage)

Just import Flipper component from 'vue-flipper' and use it like any other Vue component.

只需从'vue-flipper'导入Flipper组件，然后像使用任何其他Vue组件一样使用它即可。

<template>
  <flipper
    width="270px"
    height="300px"
    :flipped="flipped"
    @click="onClick"
  >
    <div slot="front">Frontface</div>

    <div slot="back">Backface</div>
  </flipper>
</template>

<script>
import Flipper from 'vue-flipper';

export default {
  components: { Flipper },
  data () {
    return {
      flipped: false
    };
  },
  methods: {
    onClick () {
      this.flipped = !this.flipped;
    }
  }
};
</script>

<style src="vue-flipper/dist/vue-flipper.css" />

用作全局组件 (Usage as global component)

If you need <flipper /> available everywhere, you can register it as a global component.

如果需要随处可用的<flipper /> ，则可以将其注册为全局组件。

And don't forget to import its CSS.

并且不要忘记导入其CSS。

import 'vue-flipper/dist/vue-flipper.css';
import Vue from 'vue';
import Flipper from 'vue-flipper';

Vue.component('flipper', Flipper);

CDN的用法 (Usage from CDN)

vue-flipper has an UMD bundle and CSS available through JSDelivr and Unpkg CDNs.

vue-flipper具有UMD捆绑包和CSS，可通过JSDelivr和Unpkg CDN使用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-flipper/dist/vue-flipper.css" />

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-flipper"></script>

<script>
  /**
   * vue-flipper is available through VueFlipper.
   */
  console.dir(VueFlipper);

  /**
   * Vue.use will add flipper as global component.
   */
  Vue.component('flipper', VueFlipper);
</script>

道具 (Props)

Name	Description	Type	Default
flipped	If true flips to backface, otherwise to frontface.	Boolean	false
width	Component's width.	CSSLength (String)	'100%'
height	Component's height.	CSSLength (String)	'100%'
duration	Component's transition duration.	CSSTime (String)	'0.5s'
transition	Component's transition timing function.	CSSTransitionFunction (String)	'ease-in'

名称	描述	类型	默认
翻转	如果为true翻转为背面，否则翻转为正面。	Boolean	false
宽度	组件的宽度。	CSSLength (String)	'100%'
高度	组件的高度。	CSSLength (String)	'100%'
持续时间	组件的过渡持续时间。	CSSTime (String)	'0.5s'
过渡	组件的过渡计时功能。	CSSTransitionFunction (String)	'ease-in'

大事记 (Events)

Flipper component pass up every HTMLElement event. So, you can use @click, @mouseover etc.

Flipper组件会传递每个HTMLElement事件。 因此，您可以使用@click ， @mouseover等。

翻译自: https://vuejsexamples.com/a-component-to-flip-elements-with-a-nice-transition/

vue 页面过渡动画翻转