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

Question

正如标题所说，我想复制下面的动画。jquery API https://api.jquery.com/toggle/分贝此默认行为如下：easing (default: swing)Type: StringA 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() {

  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);

我希望我能帮忙

Answer 2

您可以切换一个类并使用 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>