Merge pull request #92 from samuelthomas2774/add-drawer-animation
Add drawer open/close animation
This commit is contained in:
commit
2da3fb95c2
|
@ -1,5 +1,9 @@
|
||||||
.bd-drawer {
|
.bd-drawer {
|
||||||
|
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
|
||||||
|
margin-bottom: 15px;
|
||||||
|
|
||||||
.bd-form-header {
|
.bd-form-header {
|
||||||
|
margin-top: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
@ -21,13 +25,25 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-drawer-contents-wrap {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.bd-drawer-contents {
|
.bd-drawer-contents {
|
||||||
|
transition: transform 0.2s ease, margin-top 0.2s ease, opacity 0.2s ease;
|
||||||
|
transform: scaleY(0) translateY(0%);
|
||||||
|
margin-top: -50%;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
> .bd-form-item:last-child > .bd-form-divider:last-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.bd-drawer-open) {
|
&::after {
|
||||||
padding-bottom: 5px;
|
content: "";
|
||||||
border-bottom: 1px solid rgba(114, 118, 126, 0.3);
|
display: block;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.bd-drawer-open {
|
&.bd-drawer-open {
|
||||||
|
@ -47,7 +63,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-drawer-contents {
|
.bd-drawer-contents {
|
||||||
display: block;
|
transform: scaleY(1) translateY(0%);
|
||||||
|
margin-top: 0%;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,10 +17,12 @@
|
||||||
<span class="bd-chevron-2"><MiChevronDown /></span>
|
<span class="bd-chevron-2"><MiChevronDown /></span>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bd-drawer-contents-wrap">
|
||||||
<div class="bd-drawer-contents">
|
<div class="bd-drawer-contents">
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
Loading…
Reference in New Issue