diff options
| -rw-r--r-- | src/App.vue | 11 | ||||
| -rw-r--r-- | src/components/SearchModal.vue | 16 | ||||
| -rw-r--r-- | src/components/Tile.vue | 42 | ||||
| -rw-r--r-- | src/index.css | 65 |
4 files changed, 65 insertions, 69 deletions
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({ }, }); </script> - -<style> -.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; -} -</style> 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', ], }); </script> - -<style> -.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; - } -} -</style> 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; -} </style> 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; + } +} |