v-if를 사용하여 하위 div를 표시할 때 상위 요소의 높이 점프를 방지하는 방법

v-if를 사용하여 하위 div를 표시할 때 상위 요소의 높이 점프를 방지하는 방법

나는 부모 div와 자녀 div가 있다.하위 div는 v-if를 통해 표시됩니다.자녀 요소에 전환을 추가할 수 있지만, 전환이 부모의 키를 넘으면 갑자기 변경되어 보기에도 좋지 않습니다.

jQuery의 slideToggle() 기능 같은 것을 원합니다.

여기 html이 있습니다.페이드 이펙트를 사용하고 있습니다.opacity:

  <div class="my-div">
    <p>some content</p>
    <transition name="fade" mode="out-in">
      <p key=1 v-if="show">hello</p>
    </transition>
  </div>

이행 css는 다음과 같습니다.

.fade-enter-active,
.fade-leave-active {
  transition: opacity .5s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

.my-div {
  background: lightgreen;
}

여기 내 코드가 있습니다.

https://jsfiddle.net/x15Lw6a3/

키를 어떻게 바꾸는지 모르겠어요.에서 전환해 보았습니다.opacity로.height및 에 대해서max-height몇 가지 다른 질문들에 따르면, 하지만 그것은 그냥 위아래로 똑딱거립니다.

어떤 아이디어나 튜토리얼 링크도 감사합니다.감사합니다!

사용해보십시오.max-height추가에 의한 속성max-height: 100px;로.fade-enter-active, .fade-leave-active을 지배하다.fade-enter, .fade-leave-to규칙은 다음과 같이 0을 설정합니다.

Vue.config.devtools = false;
Vue.config.productionTip = false;

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
  max-height: 100px;
  opacity: 1;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  max-height: 0px;
}

.my-div {
  background: lightgreen;
}

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <div class="my-div">
  <p>some content</p>
  <transition name="fade" mode="out-in">
    <p key=1 v-if="show" >hello</p>
  </transition>
  </div>
</div>

주의:

애니메이션이 매끄럽지 않다는 것을 알 수 있다.

스스로 여러 가지 방법을 시도해 보았고 결국 부품을 구하게 되었고, 나에게 완벽하게 일을 해냈습니다.CSS 트랜지션을 사용하여 타깃을 설정합니다.height소유물.

new Vue({
  el: '#demo',

  data() {
    return {
      show: true
    }
  }
});

.my-div {
  background: lightgreen;
}

<div id="demo">
  <button v-on:click="show = !show">Toggle</button>

  <div class="my-div">
    <p>some content</p>

    <vue-slide-toggle :open="show" tag="div" :duration="500">
      <p v-if="show">hello</p>
    </vue-slide-toggle>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-slide-toggle"></script>

언급URL : https://stackoverflow.com/questions/54595825/how-to-avoid-parent-elements-height-jumping-when-displaying-a-child-div-with-v