Styjun

I've got this line in my vue component:

<p><b>You have <transition name="fade" mode="out-in"><span :key="todos_counter">todos_counter</span></transition> items</b></p>

The problem seems to be, because todos_counter is coming from vuex store using MapGetters, its real initial value is 0, but then on the initial load it update to (say) 16, so Vue applied the transition on the initial page-load. I only want a transition if todos_counter changed AFTER the first load.

So basically I want the initial load to not include ANY transition, but if after the initial component load is completed todos_counter changes, I do want the transition to occur.

This is really tricky, even using watch on the component level is hard because from the watcher's perspective todos_count DOES change on the first page load.

Try this, hopefully it should work God willing.

In your template:

<p>
 <b>
 You have 
 <!-- Added duration prop here -->
 <transition 
 name="fade" 
 mode="out-in"
 :duration="transitionDuration" 
 >
 <span 
 :key="todos_counter"
 >
 todos_counter
 </span>
 </transition> 
 items
 </b>
</p>

In your script:

<script>
 export default 
 data() 
 return 
 // this is as if there is no transition, it's way too fast.
 transitionDuration: "1ms"
 ;
 ,
 mounted() 
 setTimeout(() => 
 // this will set the duration back to normal after the initial render.
 this.transitionDuration = "1000ms"
 , 100)
 
 
<script>

You really need a way of determining when the data is loading so you can control the transition. Right now the value is initially rendered as 0 and then after loading it changes to 16, so the transition will play.

You can try something like this:

<p v-if="!loading">
 <b>You have <transition name="fade" mode="out-in"><span :key="todos_counter">todos_counter</span></transition> items</b>
</p>

computed: 
 ...mapState(['loading']),
 ...mapGetters(['todos_counter']),

loading must be initially true, then after the initial load it is set to false.

It doesn't have to be exactly like this, but you get the idea.

This is the approach I went with:

HTML:

<p><b>You have <transition v-bind:name="animateOn" mode="out-in"><span :key="todos_counter">todos_counter</span></transition> items</b></p>

JS:

 data: () => (
 animateOn: "none",
 updatedBefore: false,
 ),

 watch: {
 todos_counter() 
 if (!this.updatedBefore) 
 this.updatedBefore = true
 
 else 
 this.animateOn = "fade"
 
 

Bind the transition name to animateOn (initial value: "none"), and then when the todo_counter changes, change this value to "fade". This way the element isn't animated on the first load.