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

Question

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

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

但是，在动画播放期间，它从 左上角 角开始扩展到 右下角 角div.

的

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

我以为CSStransition-origin属性可能有效果，但好像不是这样。

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

Answer 1

我将从 0 的高度开始，并为高度设置动画属性。

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>

Answer 2

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

The .toggle() method animates the width, height, and opacity of the matched elements simultaneously.

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

有任何方法可以做到这一点

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

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

这个故事的寓意：如果您使用第三方 Javascript 库，例如 jQuery，您真的需要在联机文档中轻松找到所需的信息，我的朋友。 :)

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

Controlling the direction of JavaScript .show() / .toggle()?

javascript

css

jquery

animation

transition