Как добавить анимацию появления фото?
Всем привет, я новичок во фронтенде и у меня такая проблема: у меня есть проект написанный на Sveltekit, в этом проекте есть страница с галереей, то есть это просто grid с фотографиями выведенными через цикл. Мне нужно сделать так, чтобы при нажатии на фото, оно открывалось в центре экрана крупно (это сделано) Но также мне нужно добавить анимацию плавного открытия этого фото, чтобы оно как-бы выходило из фотографии на которую кликнул пользователь, увеличивалось и перемещалось в центр и всё это анимацией.
<script lang="ts"> import ResponsiveImage from '$lib/ResponsiveImage.svelte'; import photos from '$lib/photos.json'; interface GalleryImage { highResSource: string; alt: string; } let images: GalleryImage[] = []; images = photos.map((photo) => ({ highResSource: photo.urlHeight, alt: photo.id })); function convertToThumbnailFileName(fullFileName: string, thumbnailSuffix: string): string { const [name, extension] = fullFileName.split('.'); const thumbnailFileName = `${name}_${thumbnailSuffix}.${extension}`; return thumbnailFileName; } let selectedImage: GalleryImage | null = null; function openImage(index: number) { selectedImage = images[index]; } function closeImage() { selectedImage = null; } </script> <div class="container"> {#each images as image, index} <div class="gallery-image" on:click={() => openImage(index)}> <ResponsiveImage source={convertToThumbnailFileName(image.highResSource, '300')} alt={image.alt} useAvif={true} width={300} height={250} isLazy={true} /> </div> {/each} </div> {#if selectedImage} <div class="modal-overlay active" on:click={closeImage}> <div class="modal active"> <img src={selectedImage.highResSource} alt={selectedImage.alt} class="modal-image" /> </div> </div> {/if} <style lang="scss"> .container { justify-content: space-evenly; align-items: center; grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); grid-gap: $standardSpacingMd; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s linear; z-index: 999; } .modal-overlay.active { opacity: 1; } .modal { background-color: white; padding: 10px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .modal-image { max-width: 90%; max-height: 70vh; margin: auto; } </style> |
<script lang="ts"> import ResponsiveImage from '$lib/ResponsiveImage.svelte'; import photos from '$lib/photos.json'; interface GalleryImage { highResSource: string; alt: string; } let images: GalleryImage[] = []; images = photos.map((photo) => ({ highResSource: photo.urlHeight, alt: photo.id })); function convertToThumbnailFileName(fullFileName: string, thumbnailSuffix: string): string { const [name, extension] = fullFileName.split('.'); const thumbnailFileName = `${name}_${thumbnailSuffix}.${extension}`; return thumbnailFileName; } let selectedImage: GalleryImage | null = null; function openImage(index: number) { selectedImage = images[index]; } function closeImage() { selectedImage = null; } </script> <div class="container"> {#each images as image, index} <div class="gallery-image" on:click={() => openImage(index)}> <ResponsiveImage source={convertToThumbnailFileName(image.highResSource, '300')} alt={image.alt} useAvif={true} width={300} height={250} isLazy={true} /> </div> {/each} </div> {#if selectedImage} <div class="modal-overlay active" on:click={closeImage}> <div class="modal active"> <img src={selectedImage.highResSource} alt={selectedImage.alt} class="modal-image" /> </div> </div> {/if} <style lang="scss"> .container { justify-content: space-evenly; align-items: center; grid-template-columns: repeat(auto-fit, minmax(250px, 300px)); grid-gap: $standardSpacingMd; } .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s linear; z-index: 999; } .modal-overlay.active { opacity: 1; } .modal { background-color: white; padding: 10px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .modal-image { max-width: 90%; max-height: 70vh; margin: auto; } </style>
Я написал такой код, анимация не работает, пробовал разные вариации, но анимация то совсем отсутствует, то центральное фото и его фон остаются прозрачными и невидимыми. Я не совсем понимаю, как мне реализовать то, что я хочу, возможно я выбрал неправильный подход по добавлению анимации
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для добавления анимации появления фото на веб-странице можно воспользоваться CSS и JavaScript. Вот пример того, как можно реализовать данную задачу:
1. Добавьте класс для изображения в ваш CSS файле, который будет определять начальные стили для фото и анимацию:
.image { opacity: 0; transition: opacity 0.5s ease; }
2. Далее, используйте JavaScript для добавления класса к изображению при загрузке страницы:
window.onload = function() { var image = document.querySelector('.image'); image.classList.add('show'); }
3. Наконец, добавьте другой класс в ваш CSS файл для определения стилей появления изображения:
.show { opacity: 1; }
Теперь, при загрузке страницы, изображение будет появляться с анимацией, заданной в CSS. Вы можете настроить длительность и тип анимации, добавив другие свойства CSS, такие как `animation-duration`, `animation-timing-function` и другие.
Убедитесь, что ваше изображение имеет класс "image" в разметке HTML:
<img src="path/to/image.jpg" class="image" alt="Image">
С помощью данного подхода вы сможете добавить анимацию появления фото на вашу веб-страницу.