CODEWITHSUNDEEP
vue.jstransition
hema sundar Ginni
hema sundar Ginni

Reputation: 323

How can I remove Vue transition dynamically

I have a table body which is declared as animation block.

In some particular scenarios I want remove the transition to the table body. Is there any way to do that.

Upvotes: 4

Views: 2757

Answers (3)

John Baker
John Baker

Reputation: 117

Dynamically changing the transition class name as suggested in most answers is not the best solution. It still causes a flickering issue, where old elements are kept in the DOM for some time after new elements are inserted.

The best and cleanest solution would be, as suggested by @xsonic in comments, to dynamically control the css boolean property of the Transition component like this:

<Transition :css="condition">
    <p>Hello World</p>
</Transition>

This way, you can define appear and leave animations as you would normally do, through v-enter-from, v-enter-to and other classes (or set a custom class), while enabling/disabling the transition with a reactive variable.

Upvotes: 0

Krasavtseva Ekaterina
Krasavtseva Ekaterina

Reputation: 81

HTML

<transition name="condition ? 'fade' : ''">
    <p>Hello</p>
</transition>

Specify the condition in the name attribute, when condition is true (or equal any value) run the "name" argument, in another case leave it empty and the transition will not work

Upvotes: 7

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85575

You can use template with if-else condition:

<template v-if="condition">
  <transition> <!-- if condition matched, use transition -->
    <<html element>>
  </transition>
</template>
<template v-else>
   <<html element>>
</template>

Upvotes: 1

Related Questions