Как я могу свернуть языковой переключатель без JS?
Поэтому я создал рабочую концепцию на основе Bootstrap 5.2.3, в которой я могу переключать языки внутри элемента карточки щелчком по значку на основе функции многократного свертывания (без JavaScript). Флаг, заголовок и содержимое переключаются с NL на EN и обратно при нажатии на флаг
Моя основная проблема: когда вы переключаетесь с одного языка на другой, переключатель кажется довольно неуклюжим: вы можете видеть, как появляется новый заголовок, а старый исчезает. Есть ли команда / способ начальной загрузки, чтобы сделать это переключение более плавным?
Https://jsfiddle.net/17vugqtz/
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/6.6.6/css/flag-icons.min.css">
<div class = "col">
<div class = "card mb-4 rounded-3">
<div class = "card-header" id = "PageSummary">
<b class = "textNL collapse multi-collapse show" aria-expanded = "true">Samenvatting</b>
<b class = "textEN collapse multi-collapse" aria-expanded = "false">Summary</b>
<a id = "flagEN" class = "float-end" data-bs-toggle = "collapse" data-bs-target = ".multi-collapse" aria-controls = "flagNL flagEN collNL collEN textNL textEN" aria-expanded = "true">
<span class = "collapse multi-collapse show fi-us"> EN </span>
</a>
<a id = "flagNL" class = "float-end" data-bs-toggle = "collapse" data-bs-target = ".multi-collapse" aria-controls = "flagNL flagEN collNL collEN textNL textEN" aria-expanded = "false">
<span class = "collapse multi-collapse fi-nl"> NL </span>
</a>
</div>
<div class = "card-body">
<div class = "collapse multi-collapse show" id = "collNL" aria-expanded = "true">NL tekst komt hier.
</div>
<div class = "collapse multi-collapse" id = "collEN" aria-expanded = "false">EN text will go here.
</div>
</div>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>Не требуется дополнительный Javascript (вне файла Bootstrap js).
То есть только с атрибутами данных? Похоже, вы просто хотите удалить анимацию из заголовка карты. Это точно?
Да, больше всего «раздражает» появление заголовка, а после этого исчезает старый заголовок, трансформация флага и содержимого менее раздражает. Спасибо за добавление CDN в мой пример кода.
Ответы 1
Если вы не хотите анимации
К сожалению, здесь нельзя использовать data-bs-animation = "false"; он не встроен в компонент сворачивания Bootstrap. Итак, вам нужно решение CSS:
.multi-collapse {
transition: none;
}
Https://jsfiddle.net/L61dq7u5/
Если вы хотите более плавный переход
Попробуйте CSS ниже.
.multi-collapse {
opacity: 0;
transition: opacity 0.35s ease;
visibility: hidden;
}
.multi-collapse.show {
visibility: visible;
transition-delay: 0.05s;
opacity: 1;
}
Https://jsfiddle.net/23y19x0q/
Круто, очень простое решение!
@KoenRijnsent Только что отредактировал мой ответ, я сначала прочитал ваш вопрос как не желающий анимации, когда вы попросили более плавный переход, поэтому я добавил пример.
Что значит "без JS"?