vue.jsでwatchによる要素の高さ設定とtransition-groupのスタイル設定について

vue.jsを最近はじめました。
調べながら作成したのですが、どうしても2つ解決できないので、
よければアドバイスいただけると嬉しいです。

（１） tableのtdの高さが可変するため、高さを合わせるために一番高いサイズを取得し、そのサイズをcssで設定しようとしましたが、うまく出来ませんでした。

tableが3つあり、横に並んでいます。
msg1、msg2、msg3がある時、メッセージが表示されるようになっています。ここで、表示・非表示により高さが可変します。

テンプレート側

<template>
  <!--テーブル１-->
  <table>
    <td ref="box.content1">
      あいうえお
      <p v-if="msg1">{{ msg1 }}</p>
    </td>
    <td>
      あいうえお
    </td>
  </table>
  <!--テーブル2-->
  <table>
    <td ref="box.content2">
      かきくけこ
      <p v-if="msg2">{{ msg2 }}</p>
    </td>
    <td>
      かきくけこ
    </td>
  </table>
  <!--テーブル3-->
  <table>
    <td ref="box.content3">
      さしすせそ
      <p v-if="msg3">{{ msg3 }}</p>
    </td>
    <td>
      さしすせそ
    </td>
  </table>
</template>

vue側（new Vueなど、いろいろ省略しています。vueは実行できている状態です。）

data() {
  return {
    msg1: '',
    msg2: '',
    msg3: '',
    box: {
      content1: '',
      content2: '',
      content3: '',
    },
 }
},
watch: {
  'box.content1': function () {
    this.adjustHeight();
  },
  'box.content2': function () {
    this.adjustHeight();
  },
  'box.content3': function () {
    this.adjustHeight();
  },
},
methods: {
  adjustHeight() {
    let h = [];
    h[0] = this.$refs['box.content1'].clientHeight;
    h[1] = this.$refs['box.content2'].clientHeight;
    h[2] = this.$refs['box.content3'].clientHeight;
    let max = Math.min.apply(null, h);
    this.$refs['box.content1'].style.height = max;
    this.$refs['box.content2'].style.height = max;
    this.$refs['box.content3'].style.height = max;
  },
}

特にエラーも表示されないのですが、、何がダメなのでしょうか、、、

（2）ブロックをforでループして表示しています。そのブロックに追加ボタンを設定して、jQueryのslideToggle()のような動きを目指していました。
transition-groupというのがあったので、ピッタリだと思い設定したのですが、cssでうまく設定できません。

テンプレート側

<template>
  <div id="list-demo">
    <button @click="addBox">追加</button>
    <transition-group name="list" tag="p">
      <div v-for="(boxVal, boxIndex) in boxValues" :key="boxIndex" class="list-item">
        <p>{{ boxVal }}<p>
         <!-- その他表示したい要素を設定しています -->
        <button @click="removeBox(boxIndex)">削除</button>
      </div>
    </transition-group>
  </div>
</template>

vue側（new Vueなど、いろいろ省略しています。vueは実行できている状態です。）

data() {
  return {
    boxValues: [
      {'1':'増１'},
      {'2':'増２'},
    ],
  }
},
methods: {
  addBox() {
      this.boxValues.push({'n':'増n'});
    },
  removeBox(index) {
    this.boxValues.splice(index, 1);
  }
},

CSS（Vue.jsの公式のCSSほぼその設定です。）

<style>
  .list-enter-active, .list-leave-active {
    transition: all 0.5s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(-10px);
  }
</style>

translateYの設定値を変えたりしているのですが、slideToggle()のような、ぬるっと出るような動きができません、、、、

もしければアドバイスいただけないでしょうか。よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

①
高さを合わせたいのであれば高さが変わるタイミングでadjustHeightを動かすように調整する必要があります。
windowのリサイズイベントやmsgの値が変更されたときなどにadjustHeightを動かすようにすると良いでしょう。ポリフィルを入れる必要がありますがResizeObserverを使っても良いと思います。

js
1// 記述例
2mounted() {
3  window.addEventListener('resize', this.adjustHeight)
4},
5watch: {
6  msg1() {
7    this.adjustHeight()
8  }
9}

②
動きだけであればCSSのイージング設定を見直すことで解決すると思います。
アニメーションをデザインしよう！知っておきたいCSSイージングのお手本 - ICS MEDIA

投稿2020/02/10 10:06

nt4c

総合スコア768

Ummo

2020/02/24 13:41

nt4cさん、回答ありがとうございます！お礼が遅れて申し訳ありません。。。まだまだ勉強不足で、回答内容に書いてくださった単語の「ポリフィル」など１つ１つ調べたりしていて、内容を理解するのに時間がかかってしまいました。まだまだ自分がとても未熟で。。でもとても勉強になりました！！！本当に本当にありがとうございます！ ①について、解決できました！ > 高さを合わせたいのであれば高さが変わるタイミングで > adjustHeightを動かすように調整する必要があります。アドバイスいただいた通り、高さが変わるタイミングが問題のようでした。 VuejsはDOMの更新をまってくれない（？）ようで、高さを合わせるメソッドを、高さが可変した時に動かそうとしても、うまくいかなかったようです。 VuejsのnextTickを使うとうまくいきました。ちゃんと理解できないかもしれませんが、これを使うとDOMの更新後に実行される（？）ようでした。 https://jp.vuejs.org/v2/api/index.html#vm-nextTick ②について、添付してくださったサイトや、以下のサイトをみたりして https://jp.vuejs.org/v2/guide/transitions.html 色々と試行錯誤したのですが。。。どうしてもうまくできませんでした。 2週間ねばったんですが解決できず、でも掲示板をこれ以上長くあけるのもと思い、一旦はここであきらめようと思います。でも調査や挑戦は継続してやろうと思います！もしできたら、同じような人がいるかもしれないので、こちらに再度書き込みいたします！今回は本当にありがとうございました！アドバイスとても助かりました！

行動規範の内容に同意します