Skip to content

Instantly share code, notes, and snippets.

@nnao45

nnao45/index.vue

Last active May 30, 2020
Embed
What would you like to do?
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