动画高度自动存储高度 - 使用velocity.js进行滑动

Question

我正在尝试制作一个像slideToggle()方法一样的滑动切换淡入淡出动画但是使用velocity.js - 希望它会更顺畅.

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

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

另外,如果你没有使用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上工作:

Answer 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 });
    }
});

演示