Question

我正在使用JavaScript的.toggle()让这个div显示/消失：

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

但是，在动画的持续时间内，它从左上角开始，然后展开到div的右下角。

理想情况下，我希望它从两个顶角开始，并向下均匀向下扩展到两个底角。

我认为CSS transition-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，当然它提供了一些有用的信息。（这是一个温和的暗示，在来到StackOverflow之前，您应该尝试自己解决问题，包括在线查看任何相关文档。）

.toggle（）方法设置动画的宽度，高度和不透明度同时匹配元素。

该文档未提供有关自定义toggle动画效果的任何信息，因此看起来您已被卡住了。如果我正确理解你，看起来你希望元素只为高度设置动画而不是宽度，所以它保持与切换相同的宽度，只是为高度设置动画。我没有看到任何使用jQuery toggle的方法。

但等等！看起来jQuery有另一个名为slideToggle的方法，它可以完全满足您的需求。它就像toggle一样，只是它只会动画高度并保持宽度相同。万岁！

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

故事的道德：如果你使用像jQuery这样的第三方Javascript库，你真的需要在我朋友的在线文档中找到你需要的信息。：）

控制JavaScript .show（）/ .toggle（）的方向？

2 个答案: