iczer
5 years ago
parent
25e1c0f808
commit
ce3ee754f5
19 changed files with 226 additions and 73 deletions
@ -0,0 +1,91 @@ |
||||
<template> |
||||
<transition |
||||
:enter-active-class="`animated ${enterAnimate} page-toggle-enter-active`" |
||||
:leave-active-class="`animated ${leaveAnimate} page-toggle-leave-active`" |
||||
> |
||||
<slot></slot> |
||||
</transition> |
||||
</template> |
||||
|
||||
<script> |
||||
import {animates} from '@/config' |
||||
|
||||
export default { |
||||
name: 'PageToggleTransition', |
||||
props: { |
||||
animate: { |
||||
type: String, |
||||
validator(value) { |
||||
return animates.find(item => item.name == value) != -1 |
||||
}, |
||||
default: 'bounce' |
||||
}, |
||||
direction: { |
||||
type: String, |
||||
validator(value) { |
||||
return ['x', 'y', 'left', 'right', 'up', 'down', 'downLeft', 'upRight', 'downRight', 'upLeft', 'downBig', |
||||
'upBig', 'downLeft', 'downRight', 'topRight', 'bottomLeft', 'topLeft', 'bottomRight', 'default'].indexOf(value) > -1 |
||||
} |
||||
}, |
||||
reverse: { |
||||
type: Boolean, |
||||
default: true |
||||
} |
||||
}, |
||||
computed: { |
||||
enterAnimate() { |
||||
return this.activeClass(false) |
||||
}, |
||||
leaveAnimate() { |
||||
return this.activeClass(true) |
||||
} |
||||
}, |
||||
methods: { |
||||
activeClass(isLeave) { |
||||
let animate = animates.find(item => this.animate == item.name) |
||||
if (animate == undefined) { |
||||
return '' |
||||
} |
||||
let direction = '' |
||||
if (this.direction == undefined) { |
||||
direction = animate.directions[0] |
||||
} else { |
||||
direction = animate.directions.find(item => item == this.direction) |
||||
direction = (direction == undefined || direction === 'default') ? '' : direction |
||||
} |
||||
window.console.log(direction) |
||||
if (direction != '') { |
||||
direction = isLeave && this.reverse ? this.reversePosition(direction, animate.directions) : direction |
||||
direction = direction[0].toUpperCase() + direction.substring(1) |
||||
} |
||||
let t = isLeave ? 'Out' : 'In' |
||||
return animate.name + t + direction |
||||
}, |
||||
reversePosition(direction, directions) { |
||||
if(direction.length == 0 || direction == 'x' || direction == 'y') { |
||||
return direction |
||||
} |
||||
let index = directions.indexOf(direction) |
||||
index = (index % 2 == 1) ? index - 1 : index + 1 |
||||
return directions[index] |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="less"> |
||||
.page-toggle-enter-active{ |
||||
position: absolute !important; |
||||
animation-duration: 0.6s !important; |
||||
width: calc(100% - 48px); |
||||
} |
||||
.page-toggle-leave-active{ |
||||
position: absolute !important; |
||||
animation-duration: 0.6s !important; |
||||
width: calc(100% - 48px); |
||||
} |
||||
.page-toggle-enter{ |
||||
} |
||||
.page-toggle-leave-to{ |
||||
} |
||||
</style> |
||||
@ -0,0 +1,17 @@ |
||||
const direct_s = ['left', 'right'] |
||||
const direct_1 = ['down', 'up', 'left', 'right'] |
||||
const direct_1_b = ['downBig', 'upBig', 'leftBig', 'rightBig'] |
||||
const direct_2 = ['topLeft', 'bottomRight', 'topRight', 'bottomLeft'] |
||||
const direct_3 = ['downLeft', 'upRight', 'downRight', 'upLeft'] |
||||
|
||||
module.exports = [ |
||||
{name: 'back', alias: '后位', directions: direct_1}, |
||||
{name: 'bounce', alias: '弹跳', directions: direct_1.concat('default')}, |
||||
{name: 'fade', alias: '淡化', directions: direct_1.concat(direct_1_b).concat(direct_2).concat('default')}, |
||||
{name: 'flip', alias: '翻转', directions: ['x', 'y', 'default']}, |
||||
{name: 'lightSpeed', alias: '光速', directions: direct_s}, |
||||
{name: 'rotate', alias: '旋转', directions: direct_3.concat('default')}, |
||||
{name: 'roll', alias: '翻滚', directions: ['default']}, |
||||
{name: 'zoom', alias: '缩放', directions: direct_1.concat('default')}, |
||||
{name: 'slide', alias: '滑动', directions: direct_1}, |
||||
] |
||||
@ -0,0 +1,11 @@ |
||||
// 系统配置
|
||||
module.exports = { |
||||
themeColor: '#1890ff', |
||||
animates: require('./animates'), |
||||
footerLinks: [ |
||||
{link: 'https://pro.ant.design', name: 'Pro首页'}, |
||||
{link: 'https://github.com/iczer/vue-antd-admin', icon: 'github'}, |
||||
{link: 'https://ant.design', name: 'Ant Design'} |
||||
], |
||||
|
||||
} |
||||
Loading…
Reference in new issue