.v-enter-from {
height: 0;
}
.v-enter-active {
opacity: 0;
height: 0;
}
//.v-enter-active::before{
// height: 0;
// content: '';
// display: block;
//}
//.v-enter-active.v-enter-to::before{
// height: 108px;
// transition: height .4s ease-in ;
//}
.v-enter-active.v-enter-to {
opacity: 1;
height: 90px;
//box-sizing border box 完美效果
transition: opacity .4s .5s ease-in , height .5s ease-in;
}
.v-leave-from {
opacity: 1;
height: 90px;
transition: opacity .5s ease-in , height .5s .5s ease-in;
}
.v-leave-active{
opacity: 0;
height: 0;
transition: opacity .5s ease-in , height .5s .5s ease-in;
}
.v-leave-to{
transition: opacity .5s ease-in , height .5s .5s ease-in;
}
<transition name="v">
<div v-show="show" class="news-card-a">
<img class="news-card-a-image" src="
alt=""/>
<div class="news-card-a-content">
<div class="news-card-a-title">123123123</div>
<div class="news-card-a-desc">
1231212312123121231212312123121231212312123121231212312123121231212312123121231212312
</div>
<div class="news-card-a-date">2012-12-12</div>
</div>
</div>
</transition>
大概这样,盒子会慢慢长高到正常高度,然后由浅到实体。