vue 移动端过渡效果_Vue应用程序的超级简单魔术移动过渡

最新推荐文章于 2023-10-05 13:46:20 发布

cuk5340

最新推荐文章于 2023-10-05 13:46:20 发布

阅读量444

点赞数

文章标签： vue python java js css ViewUI

原文链接：https://vuejsexamples.com/super-easy-magic-move-transitions-for-vue-apps/

版权

vue 移动端过渡效果

超速驾驶 (vue-overdrive)

Super easy magic-move transitions for Vue apps, powered by Ramjet.

由Ramjet支持的Vue应用程序的超级轻松魔术移动过渡。

View demo 查看演示 Download Source 下载源

项目安装 (Project Install)

# npm
npm install vue-overdrive

# yarn
yarn add vue-overdrive

例子 (Examples)

它是如何工作的？ (How does it work?)

Just like with React Overdrive, wrap any two elements in a component. Add the same id to create a transition between the elements.

就像React Overdrive一样，将任意两个元素包装在一个零件。添加相同的ID，以在元素之间创建过渡。

导入并安装 (Import and install)

import Overdrive from 'vue-overdrive'
Vue.use(Overdrive)

要么

import { VOverdrive } from 'vue-overdrive'

// Register the component locally
components: {
  'overdrive': VOverdrive
}

使用Vue Router设置(至少)两条不同的路线 (Set up (at least) two different routes with Vue Router)

Inside your routes file –

在您的路线文件中–

{
  path: '/circle',
  name: 'Circle',
  component: Circle
},
{
  path: '/rectangle',
  name: 'Rectangle',
  component: Rectangle 
}

脚手架 (Scaffold your components)

In Circle.vue:

在Circle.vue ：

<template>
  <overdrive id="element" :easing="easing" :duration="350">
    <div class="circle"></div>
  </overdrive>
</template>

<script>
import * as easing from 'eases/quart-in-out' // Bring 'yr own easing functions!
export default {
  name: 'el-circle',
  data () {
    return {
      easing
    }
  }
}
</script>

<style scoped>
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    float: left;
  }
</style>

And in Rectangle.vue –

在Rectangle.vue –

<template>
  <overdrive id="element">
    <div class="rectangle"></div>
  </overdrive>
</template>

`v-if`用法 (Usage with `v-if`)

If you're not using Vue Router (and instead using Vue's built-in v-if directive), be sure to specify a unique key prop on each instance of <overdrive>

如果您不使用Vue路由器(而是使用Vue的内置v-if指令)，请确保在<overdrive>每个实例上指定唯一的key道具

<overdrive key="a" id="window" :duration="450" v-if="!windowOpen">
  <!-- some element -->
</overdrive>
<overdrive key="b" id="window" :duration="450" v-if="windowOpen">
  <!-- some element -->
</overdrive>

自定义(API) (Customize it (API))

Prop	Description	Default Value
id	Required. A unique string or number to identify the component.
tag	Wrapping element type	`div`
duration	Animation duration (in milliseconds)	`250`
easing	Easing Function (must pass a function)	`ramjet.linear`

Struts	描述	默认值
ID	需要。标识组件的唯一字符串或数字。
标签	包装元件类型	`div`
持续时间	动画持续时间(以毫秒为单位)	`250`
缓和	缓动功能(必须通过功能)	`ramjet.linear`