diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 6 | ||||
| -rw-r--r-- | src/components/BaseLine.vue | 6 |
2 files changed, 7 insertions, 5 deletions
diff --git a/src/App.vue b/src/App.vue index 308137b..f32b367 100644 --- a/src/App.vue +++ b/src/App.vue @@ -48,10 +48,8 @@ const contentAreaRef = ref(null as HTMLElement | null); const store = useStore(); // For content sizing (used to decide between horizontal and vertical mode) -const contentWidth = ref(window.innerWidth); -const contentHeight = ref(window.innerHeight); - // Setting this and contentWidth to 0 makes it likely that 'vert' will change on startup, - // and trigger unwanted transitions (like baseline spans changing size) +const contentWidth = ref(0); +const contentHeight = ref(0); const vert = computed(() => contentHeight.value > contentWidth.value); function updateAreaDims(){ let contentAreaEl = contentAreaRef.value!; diff --git a/src/components/BaseLine.vue b/src/components/BaseLine.vue index 3f51a86..081225c 100644 --- a/src/components/BaseLine.vue +++ b/src/components/BaseLine.vue @@ -37,6 +37,10 @@ const periods: Ref<Period[]> = ref([ {label: 'Three', len: 1}, ]); +// For skipping transitions on startup +const skipTransition = ref(true); +onMounted(() => setTimeout(() => {skipTransition.value = false}, 100)); + // For size tracking (used to prevent time spans shrinking below 1 pixel) const width = ref(0); const height = ref(0); @@ -89,7 +93,7 @@ function spanStyles(range: TimelineRange){ } return { ...styles, - transition: 'all 300ms ease-out', + transition: skipTransition.value ? 'none' : 'all 300ms ease-out', color: 'black', backgroundColor: store.color.alt, opacity: 0.3, |