动画高度到自动存储高度 - 使用velocity.js的slideUp

Posted 2023-03-06

【中文标题】动画高度到自动存储高度 - 使用velocity.js的slideUp

【英文标题】：Animate height to auto - storing height - slideUp with velocity.js

【发布时间】：2014-06-20 08:57:14

【问题描述】：

我正在尝试使用velocity.js 制作类似slideToggle() 方法的滑动切换淡入淡出动画 - 希望它会更流畅。

因为我无法滚动到 auto - 我将高度放在变量中并使用它来设置高度的动画。我遇到的问题是高度值存储一次，如果页面稍微调整大小，则数字不再正确。 - 另外 - 因为该区域在页面加载时被隐藏，（在它获得初始高度之后）我无法再次检查高度（如果发生窗口大小调整）

最后我想把它放到一个函数中，所以保持相对它的关键。

另外，如果你没有使用velocity.js，它基本上就像.animate() - 所以它不是问题的一部分。

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

.button-w 
  width: 100%;
  float: left;


.box 
  width: 100%;
  border: 1px solid lime;
  overflow: hidden;
  color: white;

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" );

    

);

有什么想法吗？

编辑

我真的没有任何真正的理由需要这些部分是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

.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（带有velocity.js）

通过将 .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); 

  

);

正在处理CodePen HERE:

【问题讨论】：

找到解决问题的方法？

几乎，但还没有处理所有的边缘情况。

【参考方案1】：

您可以尝试更改 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 );
    
);

Demo

【讨论】：

很酷的想法。但是，当您在那里有实际内容时，它似乎并没有按预期工作。看看这个：jsfiddle.net/sheriffderek/WnHB6你的 opacity 建议让我想知道为什么我真的需要设置 display 属性。

@sheriffderek 我更新了我的答案，第一次忽略了你的速度呼叫（哎呀）

它的性能不如transforming 好，但transform 只改变视觉 状态，而不是布局

以为我很聪明，并且会为此得到一些因果报应，但你比我早了几年。 :P marginTop: '-100%' 不适合我，我需要为它获取-outerHeight(true)。 codepen.io/corysimmons/pen/xZvPab?editors=1010

【参考方案2】：

为什么不用el.velocity("reverse"); 关闭它呢？元素的原始高度已经存储在 Velocity 中。

【讨论】：

是的。这真的很酷。想法是，有多个按钮对高度做不同的事情......一个关闭按钮和一个打开按钮也充当关闭按钮等...... +如果有人调整他们的浏览器大小---我想要一个新的高度存储。

非常适合我的用例。谢谢！

【参考方案3】：

您现在可以使用

$element.velocity("slideUp", options);
$element.velocity("slideDown", options);

例如

$element
    .velocity("slideDown",  duration: 1500 )
    .velocity("slideUp",  delay: 500, duration: 1500 );

值得注意的是，动画完成后元素的高度设置为auto。所以不用担心动态大小的容器......

官方文档：http://julian.com/research/velocity/#fade

【讨论】：

如果您能提供更多上下文和解释，那就太好了。

@StephanKristyn 当然。我只是在官方文档中添加了另一个示例和相应部分的链接。

我认为它仍然设置为display: none;。

@sheriffderek 我会检查一下，但如果您不希望这种行为，您可以随时将其包装在容器中。