CSSで、上の要素がなくなったときに、下の要素を滑らかに上に移動させたい

Question

前提・実現したいこと

CSSでカクつく動作を直したです。

次のソースコードで、<li>b</li>をクリックしたら.fadeOut()する機能があります。

その際の<li>c</li>の移動を、現状のカクっではなく、スルっと上になめらかに移動したいのですが、どのように書けばよろしいでしょうか？

発生している問題

カクついてしまう

該当のソースコード

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

li { 
    width: 200px;
    height: 30px;
    margin: 10px;
    background: pink;
}

$('li').click(function(){
	$(this).fadeOut();
});

試したこと

CSSでtransitionを追加するだけで解決できると考えましたが無理でした。

li { 
    transition: 2s; / transition を追加 */
}

ならばアニメーションを作るのかと思い次を書きましたがうまくいかず、要素が被ってしまいました。（それに作ってから気づきましたが、liの高さが可変なのでtranslateY(-30px)では対応できなそうです。）

li.surutto {
    animation: surutto 2s both; /* surutto を追加 */
}

/* アニメーションを作る */
@keyframes surutto {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-30px);
  }  
}

$('li').click(function(){
	$(this).fadeOut();
	$(this).next('li').addClass('surutto'); // surotto を追加
});

Comments

[hoshi-takanori]

こんな感じ？
https://stackoverflow.com/a/31304002/1019868

[nikuatsu]

ありがとうございます。そんな感じです

Answer 1

うちも昔jQuery使ってた時にぎこちなくて嫌だなと思っていたんですけど放置してました
今回良い機会なのでもう使う事もないと思いますがなめらかに出来ないか試してみることにしました。

どうしてガクンと消えるのかなと、よく観察してみたところ
そもそもの問題は
<li>のheightやmarginが消えた後も<li>自体が存在するため
通常行われるmarginの相殺が行われずに
<li>タグの上下margin分の高さ(想定の2倍ですね)が残ってしまい
その状態で.hide()やdisplay:none;すると急に空っぽの<li>がせき止めていた
marginの相殺が始まって片方のmarginが吸収されてしまうのがガクンとなる原因ぽいです(おそらくですけど)

なので、margin-top分だけネガティブマージンを指定してみました。
ついでにpaddingが付いた時の事を想定して上下だけ0にしてみました。

どうでしょうか？

上下のmarginが異なる場合にも対応させられたっぽいやつです。
改めてサンプルご覧ください。

function clearanceT(t, b, x, n, owner) {
  if (owner.index() === 0) {
    return `${t}px`;
  } else {
    return t > b ? `-${n}px` : `${n}px`;
  }
}
function clearanceB(t, b, x, n, owner) {
  if (owner.index() === 0) {
    return `-${t}px`;
  }
  else{
    return t > b ? `${n}px` : `-${n}px`;
  }
}
$("li").click(function () {
  $(this).first().css({ background: "red !important" });
  // $(this).fadeOut();
  var mt = parseInt($(this).css("margin-top"), 10);
  var mb = parseInt($(this).css("margin-bottom"), 10);
  var mx = Math.max(mt, mb);
  var mn = Math.min(mt, mb);
  var owner = $(this);
  $(this).animate(
    {
      height: 0,
      opacity: 0,
      marginTop: clearanceT(mt, mb, mx, mn, owner),
      marginBottom: clearanceB(mt, mb, mx, mn, owner),
      paddingTop: 0,
      paddingBottom: 0
    },
    "slow",
    function () {
      console.log(owner.css("marginTop"), owner.css("marginBottom"));
      $(this).remove();
    }
  );
});

サンプル
https://codepen.io/recal/pen/PoJORdP

Comments

[recal]

あ、これだと上下のmarginが異なる場合は駄目ですね。

[recal]

アップデートしてみました。

[nikuatsu]

これは思ってなかったレベルで理想的です。CSSで簡単に実装できるかと踏んでいたのですが、かなり大変なコードでしたね。お手数おかけしました。どうもありがとうございます。

Answer 2

jQueryのfadeOutは徐々に透明(opacity:0)にしていき、最後にdisplay:noneにします。
display:noneになるとその要素は存在しないことになりますので、後の要素が上に移動します。
display:noneはオンオフしかないのでアニメーションは効きません。

opacity:0 と高さと上下マージンを0にするアニメーション(transition)をCSSで実装して、jQueryはクラスの追加のみにするといいでしょう。

li { 
    width: 200px;
    height: 30px;
    margin: 10px 10px 0 10px;
    background: pink;
    transition: all 2s 1s, opacity 2s;
}
li.fadeout {
    opacity: 0;
    height: 0;
    margin: 0 10px;
}

$('li').click(function(){
    $(this).addClass('fadeout');
});

CodePenサンプル

Comments

[nikuatsu]

display:noneはオンオフしかないので…、なるほど納得いきました。ありがとうございます。かなり理想に近い動きになりました。