如何在 vanilla js/css 中复制 jquery 动画序列

Question

正如标题所说，我想复制下面的动画。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>

Answer 1

我不知道我是否正确理解你的问题，但你想要document.addEventListener('click', ()=>{$('#elem').toggle('.hide');});在普通的JS中？您有两个选择：将数据属性设置为#elem，或者检查#elem 是否具有类.hide。但将 css 添加到元素中更容易具有数据属性：<div id='elem' data-status='inv' class='hide'>easing text transion</div>let toggleFunction = function() {&nbsp; let elem = document.querySelector('#elem');&nbsp; if (elem.dataset.status == "inv") {&nbsp; &nbsp; elem.className = "";&nbsp; &nbsp; elem.dataset.status = "vis";&nbsp; } else if (elem.dataset.status == "vis") {&nbsp; &nbsp; elem.className = "hide";&nbsp; &nbsp; elem.dataset.status = "inv";&nbsp; }}document.addEventListener('click', toggleFunction);或者用CSS：<div id='elem' style='display: none;'>easing text transion</div>let toggleFunction = function() {&nbsp; let elem = document.querySelector('#elem');&nbsp; if (elem.style.display == 'none') {&nbsp; &nbsp; elem.style.display = 'inherit';&nbsp; } else {&nbsp; &nbsp; elem.style.display = 'none';&nbsp; }}document.addEventListener('click', toggleFunction);如果您仍然想要动画：<div id='elem' style='height: 0px;'>easing text transion</div>#elem {&nbsp; transition: 1s ease-in-out all;&nbsp; overflow-y: hidden;}let toggleFunction = function() {&nbsp; let elem = document.querySelector('#elem');&nbsp; if (elem.style.height == '0px') {&nbsp; &nbsp; elem.style.height = '18px';&nbsp; } else {&nbsp; &nbsp; elem.style.height = '0px';&nbsp; }}document.addEventListener('click', toggleFunction);我希望我能帮忙

Answer 2

您可以切换一个类并使用 css 转换来完成它document.addEventListener('click', () => {&nbsp; document.getElementById('elem').classList.toggle('no-height')})#elem {&nbsp; max-height: 2em;&nbsp; transition: max-height 0.5s ease-in-out;&nbsp; overflow-y: hidden;}#elem.no-height {&nbsp; max-height: 0;}<div id='elem'>&nbsp; easing text transion</div>