Question

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

因为我无法滚动到 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（with velocity.js）

通过将.box设置为height：0来隐藏.inner-wrapper，并使用.hidden-box类隐藏溢出。存储.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:

Answer 1

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

Answer 2

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

Answer 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

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

HTML

CSS

jquery（velocity.js）

修改

CSS

jQuery（with velocity.js）

3 个答案: