adata-ui 2.1.19 → 2.1.21

package/components/elements/photos-animation/APhotosAnimation.vue

@@ -1,85 +1,85 @@
-<script setup lang="ts">
-interface Photo {
-  src: string
-  classes: string
-}
-
-const props = defineProps<{
-  photos: Photo[]
-}>()
-
-const getAnimationClass = (index: number) => {
-  if (props.photos.length === 1) return 'fade-in'
-  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
-  return directions[index % 4]
-}
-</script>
-
-<template>
-  <div class="relative size-full">
-    <img
-      v-for="(photo, index) in photos"
-      :key="index"
-      :src="photo.src"
-      :alt="photo.src"
-      loading="lazy"
-      :class="['photo', getAnimationClass(index), photo.classes]"
-    />
-  </div>
-</template>
-
-<style scoped>
-.photo {
-  position: absolute;
-  opacity: 0;
-  transform: translate(0, 0);
-  animation: fadeSlide 1s forwards;
-}
-
-.fade-in {
-  animation: fadeOnly 1s forwards;
-}
-
-.from-top {
-  animation-name: slideFromTop;
-}
-.from-right {
-  animation-name: slideFromRight;
-}
-.from-bottom {
-  animation-name: slideFromBottom;
-}
-.from-left {
-  animation-name: slideFromLeft;
-}
-
-@keyframes fadeOnly {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-@keyframes slideFromTop {
-  from { transform: translateY(-20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromRight {
-  from { transform: translateX(20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-@keyframes slideFromBottom {
-  from { transform: translateY(20px); opacity: 0; }
-  to { transform: translateY(0); opacity: 1; }
-}
-
-@keyframes slideFromLeft {
-  from { transform: translateX(-20px); opacity: 0; }
-  to { transform: translateX(0); opacity: 1; }
-}
-
-.photo {
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-}
-</style>
+<script setup lang="ts">
+interface Photo {
+  src: string
+  classes: string
+}
+
+const props = defineProps<{
+  photos: Photo[]
+}>()
+
+const getAnimationClass = (index: number) => {
+  if (props.photos.length === 1) return 'fade-in'
+  const directions = ['from-top', 'from-right', 'from-bottom', 'from-left']
+  return directions[index % 4]
+}
+</script>
+
+<template>
+  <div class="relative size-full">
+    <img
+      v-for="(photo, index) in photos"
+      :key="index"
+      :src="photo.src"
+      :alt="photo.src"
+      loading="lazy"
+      :class="['photo', getAnimationClass(index), photo.classes]"
+    />
+  </div>
+</template>
+
+<style scoped>
+.photo {
+  position: absolute;
+  opacity: 0;
+  transform: translate(0, 0);
+  animation: fadeSlide 1s forwards;
+}
+
+.fade-in {
+  animation: fadeOnly 1s forwards;
+}
+
+.from-top {
+  animation-name: slideFromTop;
+}
+.from-right {
+  animation-name: slideFromRight;
+}
+.from-bottom {
+  animation-name: slideFromBottom;
+}
+.from-left {
+  animation-name: slideFromLeft;
+}
+
+@keyframes fadeOnly {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes slideFromTop {
+  from { transform: translateY(-20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromRight {
+  from { transform: translateX(20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+@keyframes slideFromBottom {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideFromLeft {
+  from { transform: translateX(-20px); opacity: 0; }
+  to { transform: translateX(0); opacity: 1; }
+}
+
+.photo {
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+}
+</style>