Переход изображения не применяется
После наведения курсора на элемент списка я пытаюсь показать, что элементы списка соответствуют изображению. У меня это работает, но проблема в том, что перехода css нет. Нужно ли добавлять селектор css? Можно ли добавить переход через javascript?
Не знаю, как это исправить, поэтому любые предложения будут полезны, спасибо.
Также используется bootstrap v5.3.0 alpha-1.
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.info(selected_item);
console.info(`previous image: ${previous_image.id}`);
console.info(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
}
});
});.test_image .d-md-block {
/* position:absolute; */
/* opacity:1; */
/* transition: opacity 0.5s linear; */
transition-timing-function: opacity 3s ease-in;
} <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}" />
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<section class = "p-5">
<div class = "container">
<h2 class = "text-center display-5 fw-bold">test</h2>
<p class = "lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class = "row g-4 justify-content-between">
<div class = "col-md">
<div class = "list-group list-group-flush">
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id = "test_list_item_1">
<span class = "badge">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style = "height: 50px; width: 50px;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_2">
<span class = "badge">
<img src = "https://www.jbcandcompany.com/images/S%20Orange.png" style = "height: 50px; width: 50px;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_3">
<span class = "badge">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "rounded-0" style = "height: 75px; width: 75px; background-color: yellow;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class = "col-md">
<div class = "image_container">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class = "test_image d-none d-md-block active" id = "test_image_1" style = "height: 500px; width: 700px;" />
<img src = "https://www.jbcandcompany.com/images/S%20Orange.png" class = "test_image d-none" id = "test_image_2" style = "height: 500px; width: 700px;" />
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "test_image d-none" id = "test_image_3" style = "height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "{{ url_for('static', filename='script/index.js') }}"></script>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
65
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Сначала добавьте предыдущую непрозрачность: 0, а затем, когда вы хотите прокрутить, установите непрозрачность: 1; если вы не будете устанавливать предыдущую непрозрачность. Ваш переход не сработает.
Ответ принят как подходящий
Просто добавьте и удалите анимацию затухания, и вы сможете добиться этого:
const test_list_items = document.querySelectorAll('.test_list_item');
test_list_items.forEach(element => {
element.addEventListener('mouseover', () => {
let previous_item = document.querySelector('.test_list_item.selected');
let current_item = element;
let previous_image = document.querySelector(`#test_image_${previous_item.id.slice(-1)}`);
let current_image = document.querySelector(`#test_image_${element.id.slice(-1)}`);
if (previous_item && previous_item.id !== current_item.id) {
let selected_item = current_item.id;
console.info(selected_item);
console.info(`previous image: ${previous_image.id}`);
console.info(`previous image: ${current_image.id}`);
previous_item.classList.remove('selected');
current_item.classList.add('selected');
// previous_image.style.opacity = 0;
previous_image.classList.remove('d-md-block');
previous_image.classList.remove('fade-in-image');
// current_image.style.opacity = 1;
current_image.classList.add('d-md-block');
current_image.classList.add('fade-in-image');
}
});
});.fade-in-image {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
-moz-animation: fadeIn 5s;
-o-animation: fadeIn 5s;
-ms-animation: fadeIn 5s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-moz-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
@-ms-keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin = "anonymous">
<link rel = "stylesheet" href = "{{ url_for('static', filename='css/index.css') }}" />
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<section class = "p-5">
<div class = "container">
<h2 class = "text-center display-5 fw-bold">test</h2>
<p class = "lead text-center mb-5">
esstsgsgsgsgsgesgsgsgegsgsgesgsgsgessegsgsg
</p>
<div class = "row g-4 justify-content-between">
<div class = "col-md">
<div class = "list-group list-group-flush">
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item selected" id = "test_list_item_1">
<span class = "badge">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" style = "height: 50px; width: 50px;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">1</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_2">
<span class = "badge">
<img src = "https://www.jbcandcompany.com/images/S%20Orange.png" style = "height: 50px; width: 50px;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">2</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
<a href = "#" class = "list-group-item list-group-item-action d-flex justify-content-between align-items-start test_list_item" id = "test_list_item_3">
<span class = "badge">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "rounded-0" style = "height: 75px; width: 75px; background-color: yellow;">
</span>
<div class = "ms-2 me-auto">
<div class = "d-flex w-100">
<h5 class = "mb-1">3</h5>
</div>
Content for list item
Content for list item
Content for list item
Content for list item
Content for list item
<!-- <p class = "mb-1 text-muted">Some placeholder content in a paragraph.</p> -->
</div>
</a>
</div>
</div>
<div class = "col-md">
<div class = "image_container">
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-101-DeepRed_1400x.jpg" class = "test_image d-none d-md-block active" id = "test_image_1" style = "height: 500px; width: 700px;" />
<img src = "https://www.jbcandcompany.com/images/S%20Orange.png" class = "test_image d-none" id = "test_image_2" style = "height: 500px; width: 700px;" />
<img src = "https://cdn.shopify.com/s/files/1/1218/4290/products/Solid-125-BrightPink_1024x.jpg" class = "test_image d-none" id = "test_image_3" style = "height: 500px; width: 700px;" />
</div>
</div>
</div>
</div>
</section>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin = "anonymous"></script>
<script type = "text/javascript" src = "{{ url_for('static', filename='script/index.js') }}"></script>Автор, а можно как-нибудь сделать анимацию плавнее? как на этом сайте: nansen.ai
—
10.02.2023 23:23
Другие вопросы по теме
JQuery для скрытия и отображения текстового поля
Все сообщения слева в системе Bootstrap Grid
Один клик в навигационном меню Запуск нескольких действий
Почему input.val() нельзя сохранить как глобальную переменную?
Переключить отображение/скрытие функций между несколькими div
Как визуализировать компонент JSX внутри определенного html-div в реакции?
Как изменить одни и те же изображения в нескольких местах с помощью JS?
Отключить удержание, но разрешить щелчок в html (мобильный)
Как отсортировать столбец даты в этом формате?
CSS не загружается в EJS в подкаталоге
Похожие вопросы
JQuery для скрытия и отображения текстового поля
React js, хотел показать анимацию только на добавленном элементе «добавить в корзину»
В веб-компоненте Как показать всплывающую подсказку и скрыть всплывающую подсказку при нажатии снаружи или при нажатии другой всплывающей подсказки
Как сохранить значение, сгенерированное циклом for, внутри массива
React Native — попытка изменить 2 высоты просмотра с помощью GestureHandler
Почему input.val() нельзя сохранить как глобальную переменную?
Я не знаю, почему я не могу получить доступ к API открытого ИИ для использования в реагирующем приложении
(Узел) Ошибка [ERR_HTTP_HEADERS_SENT]: невозможно установить заголовки после их отправки клиенту
Как исправить это, чтобы отображалось переменное количество пунктов меню?
Как искать и сопоставлять, если имя листа из значения ячейки на другом листе в скрипте приложений Google и копировать ячейки
как говорит Сахил Дхир, вы можете добавлять и удалять анимацию затухания. Оно работает.