Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 7x 7x 7x | <script>
export default {
name: 'f-collapse-transition',
functional: true,
render(h, { children }) {
const old = {};
return h(
'transition',
{
on: {
beforeEnter(el) {
old.paddingTop = el.style.paddingTop;
old.paddingBottom = el.style.paddingBottom;
el.style.height = '0';
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
},
enter(el) {
old.overflow = el.style.overflow;
el.style.height = el.scrollHeight ? el.scrollHeight + 'px' : '';
el.style.paddingTop = old.paddingTop;
el.style.paddingBottom = old.paddingBottom;
el.style.overflow = 'hidden';
},
afterEnter(el) {
el.style.height = '';
el.style.overflow = old.overflow;
},
beforeLeave(el) {
old.paddingTop = el.style.paddingTop;
old.paddingBottom = el.style.paddingBottom;
old.overflow = el.style.overflow;
el.style.height = el.scrollHeight + 'px';
el.style.overflow = 'hidden';
},
leave(el) {
if (el.scrollHeight) {
el.style.height = 0;
el.style.paddingTop = 0;
el.style.paddingBottom = 0;
}
},
afterLeave(el) {
el.style.height = '';
el.style.overflow = old.overflow;
el.style.paddingTop = old.paddingTop;
el.style.paddingBottom = old.paddingBottom;
},
},
},
children,
);
},
};
</script>
|