RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

split-timeline: use top for animations 

Signed-off-by: Varun Patil <varunpatil@ucla.edu>
pull/563/head
Varun Patil 2023-04-01 09:12:32 -07:00
parent 552a613778
commit 07da344807
1 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/SplitTimeline.vue
View File

@ -268,11 +268,14 @@ export default defineComponent({
> .timeline { > .timeline {
height: 50%; height: 50%;
padding-left: 0; padding-left: 0;
will-change: transform, height;
transition: transform 0.2s ease, height 0.2s ease;
border-top-left-radius: 20px; border-top-left-radius: 20px;
border-top-right-radius: 20px; border-top-right-radius: 20px;
// Note: you can't use transforms to animate the top
// because it causes the viewer to be rendered incorrectly
will-change: top, height;
transition: top 0.2s ease, height 0.2s ease;
> .timeline-header { > .timeline-header {
height: 58px; height: 58px;
@ -299,19 +302,18 @@ export default defineComponent({
} }
&.m-zero > .timeline { &.m-zero > .timeline {
transform: translateY(calc(200% - 60px)); // show attribution top: calc(100% - 58px); // show attribution
} }
&.m-zero > .primary { &.m-zero > .primary {
height: calc(100% - 60px); // show full map height: calc(100% - 58px); // show full map
} }
&.m-one > .timeline { &.m-one > .timeline {
transform: translateY(100%); // show half map top: 50%; // show half map
} }
&.m-two > .timeline { &.m-two > .timeline {
will-change: unset; // ensure top-bar is at top top: 0%;
transform: none; // show timeline
height: 100%; height: 100%;
} }
} }