update wave

pull/309/head
tangjinzhou 2018-11-14 21:54:13 +08:00
parent 519c744ec7
commit 6de4c38a5f
1 changed files with 22 additions and 9 deletions

View File

@ -1,12 +1,23 @@
import TransitionEvents from './css-animation/Event' import TransitionEvents from './css-animation/Event'
let styleForPesudo
// Where el is the DOM element you'd like to test for visibility
function isHidden (element) {
return !element || element.offsetParent === null
}
export default { export default {
name: 'Wave', name: 'Wave',
props: ['insertExtraNode'], props: ['insertExtraNode'],
mounted () { mounted () {
this.$nextTick(() => { this.$nextTick(() => {
this.instance = this.bindAnimationEvent(this.$el) const node = this.$el
if (node.nodeType !== 1) {
return
}
this.instance = this.bindAnimationEvent(node)
}) })
}, },
@ -25,7 +36,7 @@ export default {
}, },
onClick (node, waveColor) { onClick (node, waveColor) {
if (node.className.indexOf('-leave') >= 0) { if (!node || isHidden(node) || node.className.indexOf('-leave') >= 0) {
return return
} }
this.removeExtraStyleNode() this.removeExtraStyleNode()
@ -37,6 +48,7 @@ export default {
node.removeAttribute(attributeName) node.removeAttribute(attributeName)
node.setAttribute(attributeName, 'true') node.setAttribute(attributeName, 'true')
// Not white or transparnt or grey // Not white or transparnt or grey
styleForPesudo = styleForPesudo || document.createElement('style')
if (waveColor && if (waveColor &&
waveColor !== '#ffffff' && waveColor !== '#ffffff' &&
waveColor !== 'rgb(255, 255, 255)' && waveColor !== 'rgb(255, 255, 255)' &&
@ -44,10 +56,12 @@ export default {
!/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color !/rgba\(\d*, \d*, \d*, 0\)/.test(waveColor) && // any transparent rgba color
waveColor !== 'transparent') { waveColor !== 'transparent') {
extraNode.style.borderColor = waveColor extraNode.style.borderColor = waveColor
this.styleForPesudo = document.createElement('style')
this.styleForPesudo.innerHTML = styleForPesudo.innerHTML =
`[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }` `[ant-click-animating-without-extra-node]:after { border-color: ${waveColor}; }`
document.body.appendChild(this.styleForPesudo) if (!document.body.contains(styleForPesudo)) {
document.body.appendChild(styleForPesudo)
}
} }
if (insertExtraNode) { if (insertExtraNode) {
node.appendChild(extraNode) node.appendChild(extraNode)
@ -64,7 +78,7 @@ export default {
} }
const onClick = (e) => { const onClick = (e) => {
// Fix radio button click twice // Fix radio button click twice
if (e.target.tagName === 'INPUT') { if (e.target.tagName === 'INPUT' || isHidden(e.target)) {
return return
} }
this.resetEffect(node) this.resetEffect(node)
@ -108,9 +122,8 @@ export default {
this.resetEffect(e.target) this.resetEffect(e.target)
}, },
removeExtraStyleNode () { removeExtraStyleNode () {
if (this.styleForPesudo && document.body.contains(this.styleForPesudo)) { if (styleForPesudo) {
document.body.removeChild(this.styleForPesudo) styleForPesudo.innerHTML = ''
this.styleForPesudo = null
} }
}, },
}, },