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

【问题标题】：How to replicate jquery animation sequence in vanilla js/css如何在 vanilla js/css 中复制 jquery 动画序列
【发布时间】：2020-12-11 10:40:20
【问题描述】：

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

【解决方案1】：

我不知道我是否正确理解了你的问题，但你想要

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

希望能帮到你

【讨论】：

感谢您的回答。是的，我正在寻找动画，而不是实际的切换功能。
只需使用 style 属性并将其设置为 0px。它就像我写的那样工作。您可能需要在 css 中微调 transiiton，但这并不难：1s 是时间，缓入出定时功能和所有属性。

【解决方案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>

【讨论】：