Css 如何在Buefy'；s字段组件？

Buefy有一个Field.vue组件，其外观如下所示

<template>
    <div class="field" :class="rootClasses">
        <div
            v-if="horizontal"
            class="field-label"
            :class="[customClass, fieldLabelSize]">
            <label
                v-if="hasLabel"
                :for="labelFor"
                :class="customClass"
                class="label" >
                <slot v-if="$slots.label" name="label"/>
                <template v-else>{{ label }}</template>
            </label>
        </div>
        <template v-else>
            <label
                v-if="hasLabel"
                :for="labelFor"
                :class="customClass"
                class="label">
                <slot v-if="$slots.label" name="label"/>
                <template v-else>{{ label }}</template>
            </label>
        </template>
        <b-field-body
            v-if="horizontal"
            :message="newMessage ? formattedMessage : ''"
            :type="newType">
            <slot/>
        </b-field-body>
        <div v-else-if="hasInnerField" class="field-body">
            <b-field
                :addons="false"
                :type="newType"
                :class="innerFieldClasses">
                <slot/>
            </b-field>
        </div>
        <template v-else>
            <slot/>
        </template>
        <p
            v-if="hasMessage && !horizontal"
            class="help"
            :class="newType"
        >
            <slot v-if="$slots.message" name="message"/>
            <template v-else>
                <template v-for="(mess, i) in formattedMessage">
                    {{ mess }}
                    <br :key="i" v-if="(i + 1) < formattedMessage.length">
                </template>
            </template>
        </p>
    </div>
</template>

{{label}}
{{label}}

{{mess}}

---

我想用类帮助在段落中添加一个过渡，这样它就不会突然出现和消失。如何实现这一点？

因为Bulma字段只需用文本填充

标记，并添加相应的类，如

。您可以播放这些类的动画

.help.is-danger {
  transition: all 300ms;
  animation: reveal 1s;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateX(-30px);
}
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}


const示例={
数据（）{
返回{
hasError:对
};
}
};
const app=新的Vue（示例）；
附件$mount（“#附件”）
.help{
高度：0px；
过渡：所有300毫秒；
}
.救命{
高度：18px；
动画：显示1s；
}
@关键帧显示{
从{
变换：比例（0）；
不透明度：0；
转换：translateX（-30px）；
}
到{
不透明度：1；
转换：translateX（0px）；
}
}

显示错误
否否否我指的是字段中显示的帮助文本查看此处显示的消息“电子邮件无效”我想添加转换哦，糟糕，我将编辑我的回答编辑是否符合您的需要？我添加了一个片段，以便您可以告诉我您不需要的内容：）您可以选中复选框切换错误我的糟糕，我没有理解得很好。对于此问题，您可以将转换添加到
帮助
类中，并使用
标记的高度。我重新输入了帖子：）您不能在
v上应用转换。如果
在大多数情况下，您需要使用
v-show
。