Use display:none for virtual list header (#96)
Fixes #59 by using display:none instead of opacity/pointer-events tricks while still showing an animation
This commit is contained in:
parent
8622b37ff0
commit
b8d862618a
|
@ -1,5 +1,4 @@
|
||||||
<div class="virtual-list-header {{shown ? 'shown' : ''}}"
|
<div class="virtual-list-header {{shown ? 'shown' : ''}} {{fadedIn ? 'faded-in' : ''}}"
|
||||||
aria-hidden="{{!shown}}"
|
|
||||||
ref:node >
|
ref:node >
|
||||||
<:Component {component} :virtualProps />
|
<:Component {component} :virtualProps />
|
||||||
</div>
|
</div>
|
||||||
|
@ -9,28 +8,47 @@
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
transition: none;
|
transition: none;
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.virtual-list-header.shown {
|
.virtual-list-header.shown {
|
||||||
opacity: 1;
|
display: block;
|
||||||
pointer-events: auto;
|
|
||||||
transition: opacity 0.333s linear;
|
transition: opacity 0.333s linear;
|
||||||
}
|
}
|
||||||
|
.virtual-list-header.faded-in {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
<script>
|
||||||
import { virtualListStore } from './virtualListStore'
|
import { virtualListStore } from './virtualListStore'
|
||||||
import { AsyncLayout } from '../../_utils/AsyncLayout'
|
import { AsyncLayout } from '../../_utils/AsyncLayout'
|
||||||
|
import { doubleRAF } from '../../_utils/doubleRAF'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
oncreate() {
|
oncreate() {
|
||||||
const asyncLayout = new AsyncLayout(() => '__header__')
|
this.observe('shown', shown => {
|
||||||
asyncLayout.observe('__header__', this.refs.node, (rect) => {
|
if (shown) {
|
||||||
asyncLayout.disconnect()
|
this.doCalculateHeight()
|
||||||
this.store.setForRealm({headerHeight: rect.height})
|
doubleRAF(() => this.set({fadedIn: true})) // animate in
|
||||||
})
|
} else {
|
||||||
|
this.set({fadedIn: false})
|
||||||
|
}
|
||||||
|
}, {init: false})
|
||||||
},
|
},
|
||||||
store: () => virtualListStore,
|
store: () => virtualListStore,
|
||||||
|
methods: {
|
||||||
|
doCalculateHeight() {
|
||||||
|
if (this.get('heightCalculated')) { // only need to calculate once, it never changes
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.set({heightCalculated: true})
|
||||||
|
const asyncLayout = new AsyncLayout(() => '__header__')
|
||||||
|
asyncLayout.observe('__header__', this.refs.node, (rect) => {
|
||||||
|
asyncLayout.disconnect()
|
||||||
|
this.store.setForRealm({headerHeight: rect.height})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
Loading…
Reference in a new issue