diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-27 00:40:08 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-27 00:40:19 +1100 |
| commit | a9d783599e34572a87b1499ff58f19328698d69b (patch) | |
| tree | d7bf3548c800f96f7d26c5299fee8604e52605e8 | |
| parent | 7b6247777c1ad824e2fdb8d756e8be52541b9f79 (diff) | |
Propagate transition-duration setting to transition animations
| -rw-r--r-- | src/components/TileTree.vue | 10 |
1 files changed, 6 insertions, 4 deletions
diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index a5ed75a..859ce1e 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -165,6 +165,8 @@ export default defineComponent({ width: '100vw', // Making this dynamic causes white flashes when resizing height: '100vh', backgroundColor: '#292524', + // CSS variables + '--transitionDuration': this.componentOptions.transitionDuration + 'ms', }; }, }, @@ -541,7 +543,7 @@ export default defineComponent({ <style> .animate-expand-shrink { animation-name: expand-shrink; - animation-duration: 300ms; + animation-duration: var(--transitionDuration); animation-iteration-count: 1; animation-timing-function: ease-in-out; } @@ -558,7 +560,7 @@ export default defineComponent({ } .animate-shrink-expand { animation-name: shrink-expand; - animation-duration: 300ms; + animation-duration: var(--transitionDuration); animation-iteration-count: 1; animation-timing-function: ease-in-out; } @@ -578,7 +580,7 @@ export default defineComponent({ } .fade-enter-active, .fade-leave-active { transition-property: opacity; - transition-duration: 300ms; + transition-duration: var(--transitionDuration); transition-timing-function: ease-out; } .slide-bottom-right-enter-from, .slide-bottom-right-leave-to { @@ -587,7 +589,7 @@ export default defineComponent({ } .slide-bottom-right-enter-active, .slide-bottom-right-leave-active { transition-property: transform, opacity; - transition-duration: 300ms; + transition-duration: var(--transitionDuration); transition-timing-function: ease-in-out; } </style> |