展开过渡不顺畅答案

【问题标题】：Expand Transition is not smooth展开过渡不顺畅
【发布时间】：2020-09-19 05:19:49
【问题描述】：

我对展开转换的奇怪行为有疑问。由于某种原因，过渡并不顺利。它在消失之前停了片刻——就像：

模板就这么简单

<template>
  <v-expand-transition>
    <v-alert
      v-if="visible"
      prominent
      type="error">
      <v-row align="center">
        <v-col class="grow">
          {{message}}
        </v-col>
        <v-col class="shrink">
          <v-btn @click="invoke">{{button}}</v-btn>
        </v-col>
      </v-row>
    </v-alert>
  </v-expand-transition>
</template>

如何解决？我正在使用最新的稳定版 chrome for windows (83.0.4103.61 x64)

【问题讨论】：

您在元素中使用padding-top 还是padding-bottom？根据您使用的盒子模型 (box-sizing)，高度不包括元素的填充。所以，如果你有 20px 的高度和 10px 的内边距，那么盒子实际上有 40px 的高度。然而，过渡只会将height 属性从 20px 缩小到 0px。然后，元素在动画结束后从 DOM 中取出（并且消失）。
@ssc-hrep3 没有。什么都没有。警报代码取自文档
在 Vuetify 文档的 alert 元素上的类 .v-alert 有 16px 的填充。您能否尝试将要缩小的元素包装成<div>，仅用于测试目的？
好的，太好了。只是因为过渡实际上只是降低了元素的 CSS 高度并最终移除了该元素。在包装器<div> 中不应发生这种情况，因为没有填充（它采用内容的实际高度）。
你帮了我很多。谢谢你:)

标签： vuetify.js

【解决方案1】：

正如 cmets 中提到的 @ssc-hrep3 代码应该如下所示：

  <v-expand-transition>
    <div v-if="visible">
      <v-alert
        prominent
        type="error">

就是这样

【讨论】：