javascript - Animating simple v-if directive in Vue - Stack Overflow

admin管理员组

文章数量:1394065

Is it possible to animate, more specifically "fadeOut" a div when it is being removed/destroyed do to a v-if conditional?

I have the most basic conditional:

<template v-if="initProxy">
  <div class="page__boot">
  <div>
</template>

In my ponents data prop, when I set initProxy to false, I'd like to fadeOut the rendered div before its destroyed, rather than it just abruptly disappearing. I know I'm missing something so trivial... suggestions?

Is it possible to animate, more specifically "fadeOut" a div when it is being removed/destroyed do to a v-if conditional?

I have the most basic conditional:

<template v-if="initProxy">
  <div class="page__boot">
  <div>
</template>

In my ponents data prop, when I set initProxy to false, I'd like to fadeOut the rendered div before its destroyed, rather than it just abruptly disappearing. I know I'm missing something so trivial... suggestions?

• javascript
• vue.js
• rendering
• frontend

Share Improve this question Follow asked Feb 20, 2018 at 12:02 Jared GarciaJared Garcia 79111 gold badge99 silver badges1919 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You should follow this basic example

<template>
  <transition name="fade">
    <div class="page__boot" v-if="initProxy">
    <div>
  </transition>
</template>

And adjust your animation:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

Also you can change duration for .fade-leave-active

本文标签： javascriptAnimating simple vif directive in VueStack Overflow