test-accordion-04
<template> | |
<div class="app"> | |
<div class="components"> | |
<p class="title">アコーディオン1</p> | |
<transition | |
name="expand" | |
@enter="enter" | |
@after-enter="afterEnter" | |
@leave="leave" | |
@after-leave="afterLeave" | |
> | |
<div v-show="isShow" class="body"> | |
<p>アコーディオン1の中身</p> | |
<p>アコーディオン1の中身</p> | |
<p>アコーディオン1の中身</p> | |
</div> | |
</transition> | |
</div> | |
<button v-on:click="isShow = !isShow">ボタン</button> | |
</div> | |
</template> | |
<script> | |
export default { | |
name: "Index", | |
data() { | |
return { | |
isShow: true | |
}; | |
}, | |
methods: { | |
enter(el) { | |
const height = getComputedStyle(el).height; | |
el.style.width = null; | |
el.style.position = null; | |
el.style.visibility = null; | |
el.style.height = 0; | |
// Force repaint to make sure the | |
// animation is triggered correctly. | |
getComputedStyle(el).height; | |
requestAnimationFrame(() => { | |
el.style.height = height; | |
}); | |
}, | |
afterEnter(el) { | |
el.style.height = "auto"; | |
}, | |
leave(el) { | |
const height = getComputedStyle(el).height; | |
el.style.height = height; | |
// Force repaint to make sure the | |
// animation is triggered correctly. | |
getComputedStyle(el).height; | |
requestAnimationFrame(() => { | |
el.style.height = "0"; | |
}); | |
}, | |
afterLeave(el) { | |
el.style.height = "auto"; | |
} | |
} | |
} | |
</script> | |
<style scoped lang="scss"> | |
.components { | |
width: 300px; | |
text-align: center; | |
font-weight: bold; | |
} | |
.title { | |
padding: 0; | |
margin: 0; | |
border-color: #666; | |
border-style: solid; | |
background: #fff; | |
font-size: 130%; | |
} | |
.body { | |
border-color: #666; | |
border-style: solid; | |
background: #F0F0F0; | |
} | |
.expand-enter-active, | |
.expand-leave-active { | |
transition: height .5s ease-in-out; | |
overflow: hidden; | |
} | |
.expand-enter, | |
.expand-leave-to { | |
height: 0; | |
} | |
</style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment