heroani v1.1.5

heroani

共享元素动画Shared element animation ---目前只支持vue 支持在组件的切换中进行穿梭，可以在非vue-router的环境下运行，支持keepalive 注意事项
App项目的目录结构中必须包含class元素"page" 它的大小将是你的浏览器可视窗口的高度，非移动端项目可以不需要这个元素
###移动端的div结构

    |--html   
      |--body   
        |--transition   
          |--keep-alive(可选)   
            |--component || router-view
              |--page(page的情况主要是考虑到移动端界面跳转，每个页面的滚动距离是不相同的)

效果演示

example

# step 1
npm i heroani --save

step 2

import {HeroAni} from 'heroani'; Vue.use(HeroAni, {time: 500});

step 3 注册组件

import {HeroUi} from 'heroani';

components: { HeroUi }

step 4 使用

Prop

master:true证明是父路由 第一次加载heroUI的页面；false为子路由
tag:标识和目的页面（子路由页面）的tag相同 从而依此完成动画的过度
Vue.use(HeroAni, {time: 500});time:动画的运行时长 transition的时长一般匹配此处