add animation to settings

lookscanned · Nov 17, 2023 · ac1a9ec · ac1a9ec
1 parent 816def4
commit ac1a9ec
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 4 deletions.
diff --git a/src/components/scan-settings/settings/BlurSetting.vue b/src/components/scan-settings/settings/BlurSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <n-form-item :label="t('settings.blur')" :show-feedback="false">
     <template #label>
-      <span :style="style">
+      <span :style="style" class="blur-label">
         {{ t("settings.blur") }}
       </span>
     </template>
@@ -36,3 +36,9 @@ const style = computed(() => {
   };
 });
 </script>
+
+<style scoped>
+.blur-label {
+  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/components/scan-settings/settings/BrightnessSetting.vue b/src/components/scan-settings/settings/BrightnessSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <n-form-item :label="t('settings.brightness')" :show-feedback="false">
     <template #label>
-      <span :style="style">
+      <span :style="style" class="brightness-label">
         {{ t("settings.brightness") }}
       </span>
     </template>
@@ -41,3 +41,9 @@ const style = computed(() => {
   };
 });
 </script>
+
+<style scoped>
+.brightness-label {
+  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/components/scan-settings/settings/ContrastSetting.vue b/src/components/scan-settings/settings/ContrastSetting.vue
@@ -1,7 +1,7 @@
 <template>
   <n-form-item :label="t('settings.contrast')" :show-feedback="false">
     <template #label>
-      <span :style="style">
+      <span :style="style" class="contrast-label">
         {{ t("settings.contrast") }}
       </span>
     </template>
@@ -41,3 +41,9 @@ const style = computed(() => {
   };
 });
 </script>
+
+<style scoped>
+.contrast-label {
+  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/components/scan-settings/settings/NoiseSetting.vue b/src/components/scan-settings/settings/NoiseSetting.vue
@@ -50,6 +50,7 @@ const style = computed(() => {
   top: 0;
   content: url("./noise.svg");
   opacity: var(--noise-opacity);
+  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 @media (prefers-color-scheme: dark) {

diff --git a/src/components/scan-settings/settings/RotateSetting.vue b/src/components/scan-settings/settings/RotateSetting.vue
@@ -1,7 +1,9 @@
 <template>
   <n-form-item :show-feedback="false">
     <template #label>
-      <span :style="style">{{ t("settings.rotate") }}</span>
+      <span :style="style" class="rotate-label">{{
+        t("settings.rotate")
+      }}</span>
     </template>
     <n-slider
       v-model:value="rotate_computed"
@@ -42,3 +44,9 @@ const style = computed(() => {
   };
 });
 </script>
+
+<style scoped>
+.rotate-label {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>
diff --git a/src/components/scan-settings/settings/RotateVarianceSetting.vue b/src/components/scan-settings/settings/RotateVarianceSetting.vue
@@ -5,6 +5,7 @@
         v-for="(character, i) in characters"
         :key="i"
         :style="characterStyle[i]"
+        class="rotate-label-character"
       >
         {{ character }}
       </span>
@@ -60,3 +61,9 @@ const characterStyle = computed(() => {
   });
 });
 </script>
+
+<style scoped>
+.rotate-label-character {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>