|
@@ -31,7 +31,7 @@ function toggle () {
|
|
|
<div class="collapse-header" :class="{ 'is-active': active }"></div>
|
|
<div class="collapse-header" :class="{ 'is-active': active }"></div>
|
|
|
</div>
|
|
</div>
|
|
|
<Transition name="fade">
|
|
<Transition name="fade">
|
|
|
- <div class="collapse-content" v-if="active">
|
|
|
|
|
|
|
+ <div class="collapse-content" v-show="active">
|
|
|
<div class="collapse-content-box">
|
|
<div class="collapse-content-box">
|
|
|
<slot></slot>
|
|
<slot></slot>
|
|
|
</div>
|
|
</div>
|
|
@@ -51,8 +51,17 @@ function toggle () {
|
|
|
content: url('../assets/arrow-down.svg');
|
|
content: url('../assets/arrow-down.svg');
|
|
|
transform: rotate(-90deg);
|
|
transform: rotate(-90deg);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
.is-active {
|
|
.is-active {
|
|
|
transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+.fade-enter-active,
|
|
|
|
|
+.fade-leave-active {
|
|
|
|
|
+ transition: opacity 0.2s ease;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.fade-enter-from,
|
|
|
|
|
+.fade-leave-to {
|
|
|
|
|
+ opacity: 0
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|
