如何在 Buefy 的 Field 组件中向此帮助文本添加过渡？

Question

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>

Full code for the above is right HERE

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

Answer 1

因为 Bulma 字段只需用文本填充 <p> 标签并添加相应的 class 就像 .is-danger 你可以玩这些 class[=16= 的动画]

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

const example = {
  data() {
    return {
      hasError: true
    };
  }
};

const app = new Vue(example);
app.$mount("#app");

.help {
  height: 0px;
  transition: all 300ms;
}

.help.is-danger {
  height: 18px;
  animation: reveal 1s;
}

@keyframes reveal {
  from {
    transform: scale(0);
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

<link href="https://unpkg.com/buefy/dist/buefy.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

  <section>
    <b-checkbox v-model="hasError">Show errors</b-checkbox>

    <b-field label="Username" :type="{ 'is-danger': hasError }" :message="{ 'Username is not available': hasError }">
      <b-input value="johnsilver" maxlength="30"></b-input>
    </b-field>

    <b-field label="Password" :type="{ 'is-danger': hasError }" :message="[
                { 'Password is too short': hasError },
                { 'Password must have at least 8 characters': hasError }
            ]">
      <b-input value="123" type="password" maxlength="30"></b-input>
    </b-field>
  </section>

</div>

如何在 Buefy 的 Field 组件中向此帮助文本添加过渡？

How do I add a transition to this help text in Buefy's Field component?

css

nuxt.js

css-transitions

buefy