动画/过渡全屏按钮父级并使父级兄弟姐妹滑到一边并消失

Question

我要做什么：
我正在尝试为每个包含 1 个按钮的 3 个 div 设置动画。当单击其中一个按钮时，我希望包含它的 div 滑动到全屏，而另外两个，即父级的兄弟姐妹，滑动到 0% 宽度并消失，作为一个漂亮、好看的动画。

什么不起作用：
似乎我无法让动画看起来流畅，两个消失的元素给我带来了很多问题，主要是因为 0% 宽度过渡不适合我。

我制作了一个包含我的问题的小提琴，并且有兴趣使这个过渡/动画尽可能流畅。

HTML：

<div id="testpile" class="inner cover">
  <div id="buttons" class="buttons">
    <div class="col-md-4 rat">
      <h1>Rationelt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="1" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
    <div class="col-md-4 emo">
      <h1>Emotionelt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="2" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
    <div class="col-md-4 per">
      <h1>Personligt</h1>
      <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam laoreet, risus vel tincidunt sagittis, lorem risus faucibus mi, eget tincidunt ipsum sapien vel dolor. Mauris pulvinar leo feugiat, ultricies est ut, porta arcu.</p>
      <button id="3" class="btn btn-group btn-default" role="button">Personligt</button>
    </div>
  </div>
</div>

jQuery：

$('.btn-group').on('click', function() {
  $(this).parent().toggleClass('fullscreen');
  $(this).parent().siblings().toggleClass('mast1');
  $(this).parent().siblings().fadeOut(250, function() {
    $(this).parent().siblings().css({
      "visibility": "hidden",
      display: 'block'
    });
  });
});

Fiddle for animation

我宁愿没有位置：absolute;，因为它往往会弄乱我页面的其余部分。

Answer 1

我从你的 js 中删除了这部分

$(this).parent().siblings().fadeOut(250, function() {
    $(this).parent().siblings().css({
      "visibility": "hidden",
      display: 'block'
    });
  });

我不知道你为什么添加它或者它在做什么？所以你的js在这里：

$('.btn-group').on('click', function() {
  $(this).parent().toggleClass('fullscreen');
  $(this).parent().siblings().toggleClass('mast1');
});

并将overflow:hidden 添加到.mast1

.mast1 {
  width: 0%;
  overflow:hidden;
}

https://jsfiddle.net/IA7medd/77k8rrrm/4/