CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Jim Phillips
Jim Phillips

Reputation: 87

vue templates transition-groups

When I had a simple list I had transitions working now im using compontents and templates the transition no longer works..Can anyone explain why?

I want each item to animate whilst it seems to do all the items in one transition.

I'm using vue2.js

my css

.flip-list-move {
  transition: transform 1s;
}

My markup 

      <div  >
<transition-group name="flip-list" tag="div" >

              <div v-for="item in accFilters" class="box"  v-bind:key="item"  >

                  <h1>{{ item.name }}</h1>
                  <img :src="item.imageUrl" style="width:200px;">
                  <p>{{item.extract}}</p>
                  {{ item.holidayType }}

                    <div is="task" v-for="avail in item.avail"   v-bind:item="avail"  >

                    </div>    


              </div>
       </transition-group>   

      </div>

    </template>

Upvotes: 1

Views: 1332

Answers (1)

Jim Phillips
Jim Phillips

Reputation: 87

It seems it is working in a way..all items are animated rather the item

Upvotes: 1

Related Questions