javascript 将高度动画化为自动存储高度 - 使用velocity.js 滑动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23449064/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate height to auto - storing height - slideUp with velocity.js
提问by sheriffderek
I'm trying to make a slide-toggle-fade animation like the slideToggle()method but with velocity.js - in the hopes that it will be much smoother.
我正在尝试使用该slideToggle()方法制作一个滑动切换淡入淡出动画，但使用velocity.js - 希望它会更流畅。
Because I can't scroll to auto- I am putting the height in variable and using that to animate height. The issue I run into is that the height value is stored once and if the page is slightly resized, then the number is no longer correct. - Also - because the area is hidden on page load, (right after it gets the initial height) I can't check for height again (if window resize occurs)
因为我无法滚动到自动- 我将高度置于变量中并使用它来动画高度。我遇到的问题是高度值存储一次，如果页面稍微调整大小，则数字不再正确。- 另外 - 因为该区域在页面加载时隐藏，（在它获得初始高度之后）我无法再次检查高度（如果发生窗口大小调整）
Eventually I'd like to put it into a function, so keeping things relative it key.
最终我想把它放到一个函数中，所以保持相对它的关键。
Also, if you haven't used velocity.js, it's basically just like .animate() - so it's not really a part of the question.
另外，如果你没有使用过velocity.js，它基本上就像.animate() - 所以它不是问题的一部分。
HTML
HTML
<section>
<div class="button-w">
<button>Toggle</button>
</div>
<div class="box">
<p>{{content}}</p>
<div class="button-w">
<button>Close</button>
</div>
</div>
</section>
CSS
CSS
.button-w {
width: 100%;
float: left;
}
.box {
width: 100%;
border: 1px solid lime;
overflow: hidden;
color: white;
}
jquery (velocity.js)
jquery (velocity.js)
var boxxHeight = $('.box').outerHeight();
$('.box').hide();
$('button').on('click', function() {
var boxx = $('.box');
if ( boxx.is(":visible") ) {
boxx.velocity({ opacity: 0, height: 0 }, { display: "none" });
} else {
boxx.velocity({ opacity: 1, height: boxxHeight }, { display: "block" });
}
});
Any Ideas?
有任何想法吗？
EDIT
编辑
I didn't really have any real reason to need the sections to be display: none. This means that I can have an outer box with overflow: hidden, and the content will always have it's natural height to retrieve and work with.
我真的没有任何真正的理由需要这些部分display: none。这意味着我可以有一个带有溢出的外框：隐藏，并且内容将始终具有检索和使用的自然高度。
<div class="button-w">
<button>Toggle</button>
</div>
<div class="box">
<div class="inner-wrapper">
{{content}}
<div class="button-w">
<button>Close</button>
</div>
</div>
</div>
CSS
CSS
.box {
width: 100%;
overflow: hidden;
color: white;
padding: 1rem 0;
.inner-wrapper {
float: left;
opacity: 0;
padding-bottom: 5em;
background: white;
color: black;
padding: 1rem;
}
}
button {
display: block;
padding: 1rem;
border: 0;
&:focus {
outline: 0;
}
}
.hidden-box {
height: 0;
opacity: 0;
padding: 0;
.inner-wrapper {
opacity: 0;
}
}
jQuery (with velocity.js)
jQuery（使用velocity.js）
"hide" the .inner-wrapper by setting the .box to height:0 and overflow hidden with .hidden-box class. The the height of the .inner-wrapper is stored and the height animation occurs just on the .box - and an opacity on the .inner-wrapper...
通过将 .box 设置为 height:0 并使用 .hidden-box 类隐藏溢出来“隐藏” .inner-wrapper。.inner-wrapper 的高度被存储，高度动画发生在 .box 上 - 并且 .inner-wrapper 上的不透明度......
$('.box').addClass('hidden-box')
$('button').on('click', function() {
var vBoxx = $(this).closest('section').find('.box');
var vInner_wrapper = $(this).closest('section').find('.inner-wrapper');
var vElementHeight = vInner_wrapper.outerHeight();
if ( vBoxx.hasClass("hidden-box") ) {
vBoxx.velocity({
height: vElementHeight
}, {
duration: 500,
}).removeClass('hidden-box');
setTimeout( function() {
$(vInner_wrapper).velocity({opacity: 1});
},250);
} else {
$(vInner_wrapper).velocity({
opacity: 0
});
setTimeout( function() {
vBoxx.velocity({ height: 0 }).addClass('hidden-box');
},250);
}
});
Working on CodePen HERE:
回答by suncat100
Why not use el.velocity("reverse");to close it? The elements original height is already stored within Velocity.
为什么不用el.velocity("reverse");关闭呢？元素的原始高度已经存储在 Velocity 中。
回答by SepehrM
You can now use
您现在可以使用
$element.velocity("slideUp", options);
$element.velocity("slideDown", options);
For instance
例如
$element
.velocity("slideDown", { duration: 1500 })
.velocity("slideUp", { delay: 500, duration: 1500 });
It's worth noting that the height of the element is set to autoafter the animation is completed. So no worries about containers with dynamic size ...
值得注意的是，元素的高度设置为auto动画完成后。所以不用担心动态大小的容器......
Official documentation: http://julian.com/research/velocity/#fade
回答by Zach Saucier
You could try changing the margin-topvalue in order to move them up and down instead. It's not the best performance wise, but I think it's the only way you can do what you want correctly
您可以尝试更改该margin-top值，以便上下移动它们。这不是最好的表现，但我认为这是你可以正确做你想做的事情的唯一方法
var boxx = $('.innerbox'),
count = 0;
$('button').on('click', function() {
if(++count % 2 == 1) {
boxx.velocity({ marginTop: "-100%" }, { duration:1000 });
} else {
boxx.velocity({ marginTop: "0%" }, { duration:1000 });
}
});
