控制 JavaScript .show() / .toggle() 的方向？答案

【问题标题】：Controlling the direction of JavaScript .show() / .toggle()?控制 JavaScript .show() / .toggle() 的方向？
【发布时间】：2019-06-07 20:54:42
【问题描述】：

我正在使用 JavaScript 的 .toggle() 让它出现/消失：

{
    display: none;
    position: fixed;
    top: 100px;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.75);
    padding: 15px;
}

但是，在动画期间，它从 左上角 角开始，并扩展到 div 的 右下角 角。 p>

理想情况下，我想从两个顶角开始，然后均匀地向下扩展到两个底角。

我认为 CSS transition-origin 属性可能有效果，但似乎并非如此。

有什么想法吗？提前致谢。 :)

【问题讨论】：

标签： javascript jquery css animation transition

【解决方案1】：

我会从 0 开始高度并为 height 属性设置动画。

function toggle() {
    var el = document.getElementsByTagName('div')[0];
    if (el.className) {
      el.className = '';
    } else {
      el.className = 'grow';
    }
}

div {
  background-color: black;
  width:200px;
  height: 0;
}

.grow {
  height: 200px;
  transition: height 2s;
}

<button onclick="toggle()">Toggle</button>
<div></div>

【讨论】：

谢谢！我将使用上面提到的 slideToggle() 方法运行，因为它在这种情况下是最简单的，但这看起来也是一个简洁的解决方案，并且可能类似于如果留给我自己的设备我会做的。我很感激！
我个人会使用像这样的纯 CSS 方法，因为生成的动画将使用您的设备 GPU 并为您提供更流畅的结果。这对平板电脑和手机有很大影响。

【解决方案2】：

我对 jQuery 的toggle 方法了解不多，所以我looked in the docs，果然它提供了一些有用的信息。（这是一个温和的提示，在使用 StackOverflow 之前，您应该尝试自己解决问题，包括在线查看任何相关文档）。

.toggle() 方法为同时匹配元素。

文档没有提供任何关于自定义 toggle 如何制作动画的信息，所以看起来你被卡住了。如果我对您的理解正确，您似乎希望元素仅对高度进行动画处理，而 而不是 对宽度进行动画处理，因此它在切换时保持相同的宽度并仅对高度进行动画处理。我没有看到任何使用 jQuery 的toggle 的方法。

但是等等！看起来 jQuery 有另一种名为 slideToggle 的方法，它完全符合您的要求。就像toggle 一样，除了它只对高度进行动画处理并保持宽度相同。万岁！

http://api.jquery.com/slidetoggle/

故事的寓意：如果您使用第三方 Javascript 库，如 jQuery，您真的需要在在线文档中找到您需要的信息，我的朋友。 :)

【讨论】：

谢谢。在来这里之前我确实花了一些时间搜索。我想我不是 100% 熟悉 Stack Overflow 的礼仪，我认为沿着这条线问一个问题是可以的。我将尝试复习我的文档浏览。这正是我一直在寻找的，对我来说是完美的解决方案。
@Koda 不用担心！通常，SO 上的人希望看到您进行了尝试，有关您尝试过的内容的一些信息以及您要解决的具体问题。许多问题已经在 SO 或其他地方得到解答，可以通过简单的谷歌搜索找到。例如，为了帮助解决这个问题，我只是用谷歌搜索了“仅 jquery 切换高度”。