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

user_5371505 0
Viewed 199

Buefy has a Field.vue component that looks as shown below

<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

I want to add a transition the paragraph with class help so that it doesn't abruptly appear and disappear. How do I achieve this?

buefy nuxt.js css-transitions css
1 Answers

Because Bulma field just fill the <p> tag with text and add the respective class like .is-danger you can play with animations of these class

.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>

user_153359540
Related