Как воспроизвести последовательность анимации jquery в vanilla js/css
Как следует из названия, я хотел бы воспроизвести приведенную ниже анимацию. jquery API https://api.jquery.com/toggle/ определяет это поведение по умолчанию следующим образом:
easing (default: swing)
Type: String
A string indicating which easing function to use for the transition.
но я не понимаю, как работает переход. Я пытался изменить непрозрачность, перевести элемент и т. д., Но, очевидно, не повезло. Если это невозможно сделать простым способом без jquery, ответ для эффекта перехода без функции переключения также приемлем (но не hide() и show(), поскольку я уже пробовал их и не смог заставить его работать должным образом). И да, я бы предпочел свинговый переход, если это возможно. любая помощь приветствуется.
document.addEventListener('click', ()=>{
$('#elem').toggle('.hide');
});.hide{
display:none
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='elem' class= 'hide'>
easing text transion
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я не знаю, правильно ли я понял ваш вопрос, но вы хотите
document.addEventListener('click', ()=>{
$('#elem').toggle('.hide');
});
в обычном JS?
У вас есть два варианта: установить атрибут данных в #elem или проверить, имеет ли #elem класс .скрывать. Но проще просто добавить CSS к элементу
С атрибутом данных:
<div id='elem' data-status='inv' class='hide'>
easing text transion
</div>
let toggleFunction = function() {
let elem = document.querySelector('#elem');
if (elem.dataset.status == "inv") {
elem.className = "";
elem.dataset.status = "vis";
} else if (elem.dataset.status == "vis") {
elem.className = "hide";
elem.dataset.status = "inv";
}
}
document.addEventListener('click', toggleFunction);
Или с css:
<div id='elem' style='display: none;'>
easing text transion
</div>
let toggleFunction = function() {
let elem = document.querySelector('#elem');
if (elem.style.display == 'none') {
elem.style.display = 'inherit';
} else {
elem.style.display = 'none';
}
}
document.addEventListener('click', toggleFunction);
Если вы все еще хотите анимацию:
<div id='elem' style='height: 0px;'>
easing text transion
</div>
#elem {
transition: 1s ease-in-out all;
overflow-y: hidden;
}
let toggleFunction = function() {
let elem = document.querySelector('#elem');
if (elem.style.height == '0px') {
elem.style.height = '18px';
} else {
elem.style.height = '0px';
}
}
document.addEventListener('click', toggleFunction);
Я надеюсь, что смог помочь
просто используйте атрибут стиля и установите его на 0px. Работает так, как я написал. Возможно, вам придется точно настроить переход в css, но это не так уж сложно: 1 с — это время, функция облегчения входа и выхода — функция синхронизации и все свойства.
Вы можете переключить класс и использовать переход css, чтобы сделать это
document.addEventListener('click', () => {
document.getElementById('elem').classList.toggle('no-height')
})#elem {
max-height: 2em;
transition: max-height 0.5s ease-in-out;
overflow-y: hidden;
}
#elem.no-height {
max-height: 0;
}<div id='elem'>
easing text transion
</div>
Спасибо за Ваш ответ. Да, я ищу анимацию, а не фактическую функцию переключения.