시작

아코디언이 jQuery라면slideToggle 훌륭해요. 이걸로 하면 좋겠지만 Vue.js 같은 데서 어떻게 해야 할지 고민할 수도 있어요.
Vue라서 다행이다.js에 vue-slide-up-down라는 라이브러리가 있기 때문에 이걸로 하면 좋을 것 같지만 자제라면 어떻게 해야 할지 정리하고 싶어요.
(나도 처음엔 혼자 한 줄 몰랐어...)

구현 방법

열기 프로세스

전제로 아코디언의 높이를 0px, 또는 overflow: hidden로 설정한다.이거 안 하면 안에 있는 게 보여요.
이 상태에서 애니메이션을 열려면 다음 절차를 따르십시오.

내용의 높이를 가져오고 (그림은 elContent) 이 값을 부모 세대에 설정합니다

CSS transition에서 대상값으로 애니메이션 만들기

애니메이션이 끝난 후 스타일 재설정(재설정하지 않으면 열린 후에 크기를 조정해도 조정되지 않음)

프로세스 닫기

닫을 때 다음 단계를 수행하십시오.한 박자를 넣으면 Vue다.js의transition과 같은 생각은 active에서 초기 값을 설정하고 to에서 목표 값을 설정하는 방법입니다.

전체 아코디언의 현재 높이를 얻고 이 값을 설정합니다.이후 한 박자를 놓은 후 0px를 설정합니다.

CSS transition에서 0px 애니메이션

닫을 때 스타일의 리셋을 하지 않습니다(리셋하면 내용을 볼 수 있기 때문).

총결산

요약하자면, 아래와 같은 코드다.
구성 요소화되어 있기 때문에 스위치의 시기는watch로 감시합니다.

const Accordion = Vue.extend({
  props: {
    isOpen: Boolean,
  },
  data() {
    return {
      heightStyle: this.$props.isOpen ? '' : '0px',
      isOverflow: !this.$props.isOpen,
    };
  },
  watch: {
    // 開閉フラグの監視
    '$props.isOpen'(isOpen) {
      this.$data.isOverflow = true;
      // 現在の高さを設定
      this.$data.heightStyle = `${this.$refs.elAccordion.clientHeight}px`;
      // ワンテンポおいてから目標の高さを設定するが、$nextTickだとうまくいかないのでsetTimeoutに変更
      window.setTimeout(() => {
        this.$data.heightStyle = isOpen ? `${this.$refs.elContent.clientHeight}px` : '0px';
      }, 10);
    },
  },
  methods: {
    // アニメーション終了時
    onTransitionEnd() {
      // 開いたときは高さとoverflowの設定を解除する
      if (this.$props.isOpen) {
        this.$data.heightStyle = '';
        this.$data.isOverflow = false;
      }
    },
  },
  template: `
    <div
      ref="elAccordion"
      class="accordion"
      :style="{
        height: $data.heightStyle,
        overflow: $data.isOverflow ? 'hidden' : '',
      }"
      @transitionend="onTransitionEnd"
    >
      <div
        ref="elContent"
      >
        <slot></slot>
      </div>
    </div>
  `,
});

끝날 때

이상은 아코디언을 만들 때의 방법이다.
마지막으로 샘플 코드를 넣고 상세한 설치는 여기를 참고하세요.
See the Pen 아코디언 by wintyo ( @wintyo )
on CodePen .