Как в Vue анимировать изменение высоты, когда удаляется или добавляется DOM элемент внутри определенного блока?
2
-
никак. Удаление нельзя анимировать. Есть много чего что нельзя анимировать. Можно написать костыль чтоб анимировался не удаляемый элемент, а как бы блок оверлей поверх него паралельно при удалении и анимировать ему высоту.– Nazar Kalytiuk23 авг 2017 в 18:30
-
2А если анимацию втиснуть перед непосредственным удалением, а на само удаление поставить задержку, ну или стартовать удаление после завершения анимации?– V.March23 авг 2017 в 18:39
Добавить комментарий
|
1 ответ
Может я не совсем правильно понял вопрос, но что мешает использовать transition на элементе, который будет удаляться/появляться, при этом родитель будет автоматически менять высоту вместе с ним.
new Vue({
el: '#app',
data: {
hide: false
}
});
#app {
border: 1px solid black;
}
.red {
background: red;
height: 200px;
}
.fade-enter-active {
transition: all 1.3s;
}
.fade-leave-active {
transition: all 1.3s;
}
.fade-enter {
height: 0;
}
.fade-leave-to {
height: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
<button v-on:click="hide=!hide">click</button>
<transition name="fade" appear>
<div class="red" v-if="!hide">
</div>
</transition>
</div>
-
-
-
есть событие, transitionend - говорит само за себя. Удалите элемент после его возникновения– Дмытрык1 янв 2019 в 7:25
-