A vue3 component across router with animations
$ npm i -s vue-relay-runneronly works for Vue 3
global registration:
import { createApp } from 'vue';
import VueRelayRunner from 'vue-relay-runner';
import 'vue-relay-runner/dist/relay.css';
const app = createApp(App);
app.use(VueRelayRunner);Use the component:
// a.page
<template>
<div id="aPage">
<vue-relay-runner :id="1">
// your component
</vue-relay-runner>
</div>
</template>
// b.page
<template>
<div id="bPage">
<vue-relay-runner :id="1">
// your component
</vue-relay-runner>
</div>
</template>
<script>
import VueRelayRunner from 'vue-relay-runner';
import 'vue-relay-runner/dist/relay.css';
export default {
name: 'app',
components: {
VueRelayRunner
}
}
</script>Type: number | string
Required: true
a unique id for component to get their context
<vue-relay-runner id="1" />Type: Object
Required: false
you can set some Style for the component
<vue-relay-runner :styleAttr={
borderRadius: 50%
}/>Type: number | string
Required: false
you can set the animation duration
<vue-relay-runner duration="800"/>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent