하드 코딩 높이를 사용하지 않고 Vue.js 전환을 어떻게 사용할 수 있습니까?

Question

버튼 클릭으로 확장하고 접을 필요가있는 요소가있는 Vue 앱이 있습니다. 효과를 덜어주기 위해 애니메이션을 적용해야합니다. 이 부분에 <transition> 태그를 사용하고 있지만 CSS의 요소 height을 하드 코딩하지 않으면 작동하지 않습니다. 요소가 동적 데이터를 포함하고 다양한 높이를 갖기 때문에 이는 작동하지 않습니다.

다음

<template> 
    <input type="button" value="Toggle" v-on:click="showIt = !showIt"/> 
    <transition name="test-tran"> 
     <div class="test-block" v-show="showIt"> 
      <div v-for="item in items">{{ item }}</div> 
     </div> 
    </transition> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       showIt: false 
      }; 
     } 
    } 
</script> 

이 대응하는 CSS입니다 : 다음 height 재산없이

.test-block { 
    /* 
    adding a height makes the transition work but 
    an accurate height can't be known ahead of time 

    height: 100px; 
    */ 
} 

.test-tran-enter-active { 
    transition: all .5s ease; 
} 

.test-tran-leave-active { 
    transition: all .5s ease; 
} 

.test-tran-enter, .test-tran-leave-to 
    height: 0; 
} 

.test-tran-leave, .test-tran-enter-to 
    /* 
    adding a height makes the transition work but 
    an accurate height can't be known ahead of time 

    height: 100px; 
    */ 
} 

, 요소 쇼와 제대로 숨 깁니다하지만 애니메이션이없는

여기 내 코드입니다. 그냥 나타나서 즉시 사라집니다.

CSS에서 높이를 하드 코딩하지 않고 애니메이션을 작동 시키려면 어떻게해야합니까?

Answer 1

아니요, 이것은 순수한 CSS 문제입니다. 작업 높이로의 전이가 제공되어야합니다. 당신은 해커 방법으로 그것을 해결할 수 있습니다.

는 How can I transition height: 0; to height: auto; using CSS?