From 8e495f248ae25564b795cd7530d20c0376a7c5d8 Mon Sep 17 00:00:00 2001 From: Terry Truong Date: Mon, 27 Jun 2022 14:40:58 +1000 Subject: Move transition/animation CSS classes to index.css --- src/App.vue | 11 ------- src/components/SearchModal.vue | 16 ----------- src/components/Tile.vue | 42 --------------------------- src/index.css | 65 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 65 insertions(+), 69 deletions(-) (limited to 'src') diff --git a/src/App.vue b/src/App.vue index d4c51b1..4096ec0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1018,14 +1018,3 @@ export default defineComponent({ }, }); - - diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 86712ef..4657db2 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -214,19 +214,3 @@ export default defineComponent({ emits: ['search', 'close', 'info-click', 'setting-chg', ], }); - - diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 607b7e9..15b8a0b 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -546,46 +546,4 @@ export default defineComponent({ width: calc(100% + var(--tileSpacing)); height: var(--tileSpacing); } -.animate-expand-shrink { - animation-name: expand-shrink; - animation-duration: 300ms; - animation-iteration-count: 1; - animation-timing-function: ease-in-out; -} -@keyframes expand-shrink { - from { - transform: scale(1, 1); - } - 50% { - transform: scale(1.1, 1.1); - } - to { - transform: scale(1, 1); - } -} -.animate-shrink-expand { - animation-name: shrink-expand; - animation-duration: 300ms; - animation-iteration-count: 1; - animation-timing-function: ease-in-out; -} -@keyframes shrink-expand { - from { - transform: translate3d(0,0,0) scale(1, 1); - } - 50% { - transform: translate3d(0,0,0) scale(0.9, 0.9); - } - to { - transform: translate3d(0,0,0) scale(1, 1); - } -} -.fadein-leave-to { - opacity: 0; -} -.fadein-leave-active { - transition-property: opacity; - transition-duration: 300ms; - transition-timing-function: ease-out; -} diff --git a/src/index.css b/src/index.css index a072000..a82c47e 100644 --- a/src/index.css +++ b/src/index.css @@ -9,3 +9,68 @@ body { font-family: Ubuntu, system-ui, sans-serif; } + +/* For transitions/animations */ +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition-property: opacity; + transition-duration: 300ms; + transition-timing-function: ease-out; +} +.fadein-leave-to { + opacity: 0; +} +.fadein-leave-active { + transition-property: opacity; + transition-duration: 300ms; + transition-timing-function: ease-out; +} +.animate-expand-shrink { + animation-name: expand-shrink; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; +} +@keyframes expand-shrink { + from { + transform: scale(1, 1); + } + 50% { + transform: scale(1.1, 1.1); + } + to { + transform: scale(1, 1); + } +} +.animate-shrink-expand { + animation-name: shrink-expand; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease-in-out; +} +@keyframes shrink-expand { + from { + transform: translate3d(0,0,0) scale(1, 1); + } + 50% { + transform: translate3d(0,0,0) scale(0.9, 0.9); + } + to { + transform: translate3d(0,0,0) scale(1, 1); + } +} +.animate-red-then-fade { + animation-name: red-then-fade; + animation-duration: 500ms; + animation-timing-function: ease-in; +} +@keyframes red-then-fade { + from { + background-color: rgba(255,0,0,0.2); + } + to { + background-color: transparent; + } +} -- cgit v1.2.3