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

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

本文关键字：toggle show JavaScript 方向 控制      更新时间：2023-09-26

我使用JavaScript的.toggle()来显示/消失:

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

然而，在整个动画过程中，它从左上角角开始，扩展到div的右下角角。

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

我认为CSS transition-origin属性可能有影响，但情况似乎并非如此。

任何想法?提前感谢。:)

我将开始一个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>

我不太了解jQuery的toggle方法，所以我查看了文档，它确实提供了一些有用的信息。(这是一个温和的提示，在使用StackOverflow之前，您应该尝试自己解决问题，包括查看任何相关的在线文档)。

.toggle()方法的作用是:动画化物体的宽度、高度和不透明度同时匹配元素

文档没有给出任何关于自定义toggle如何做动画的信息，所以看起来你被卡住了。如果我对你的理解是正确的，似乎你希望元素只动画高度和而不是的宽度，所以它保持相同的宽度，因为它切换，只是动画高度。我看不出用jQuery的toggle有什么办法。

但等等!看起来jQuery有另一个叫做slideToggle的方法，它可以完全满足你的需求。它就像toggle，除了它只动画的高度和保持宽度相同。万岁!

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

这个故事的寓意:如果你正在使用第三方Javascript库，比如jQuery，你真的需要在在线文档中找到你需要的信息。:)

相关文章：