如何在 Vue.js 中的单个列表元素上使用过渡? [英] How can I use transition on individual list elements in Vue.js?

问题描述

我对 vue.js 中的转换的理解是你使用 在单个元素之间设置动画， 为整个列表设置动画.

似乎如果您想为列表项内的过渡设置动画，您可以在列表内使用 .例如像这样:

<过渡><div>从此过渡...

<div>……到这个.

</span>

然而，当我进行更改时，动画不起作用.这是预期的行为吗?

更新:经过一番修修补补，我发现我原来的假设是正确的.我只是做错了别的事情.但对于遇到此问题的其他人来说，值得注意的是.

如果要为列表的各个组件设置动画，可以在列表中使用 .

解决方案

您可以使用过渡组以相同的方式过渡所有子项.另外，尝试在 v-for

之前设置过渡组

new Vue({el: "#app",数据: {项目 : [{消息:'sometext'，ID:1}，{消息:'sometext'，ID:2}，{消息:'sometext'，ID:3}],编号:3},方法: {新增项目(){这个.id++this.items.push({message: 'sometext', id: this.id});},进入(){console.log('transition enter call');}}})

.fade-enter-active, .fade-leave-active {过渡:不透明度 0.5s；}.fade-enter, .fade-leave-to/* .fade-leave-active 低于版本 2.1.8 */{不透明度:0；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><div id="容器"><button @click="addItem()">添加项目</button><transition-group :name="'fade'" v-on:enter="enter"><span v-for="item in items" v-bind:key="item.id">{{item.message}}</span></transition-group>

My understanding of transitions in vue.js is that you use <transition> to animate between individual elements and <transition-group> to animate a whole list.

It seems as though if you wanted to animate a transition within a list item you'd use <transition> within the list. e.g. something like this:

<span v-for="item in items">
  <transition>

    <div>
        Transition from this...
    </div>

    <div>
         ...to this.
    </div>

  </transition>
</span>

Yet, when I make that change the animation doesn't work. Is this an expected behavior?

Update: after some tinkering, I have found that my original hypothesis was correct. I was just doing something else wrong. But it's worth noting for anyone else who comes across this problem.

You can use <transition> inside a list if you want to animate individual components of the list.

解决方案

You use transition groups to transition all children in the same way. In addition, try setting the transition group before your v-for

new Vue({
  el: "#app",
  data: {
    items : [
      {message: 'sometext', id: 1},
      {message: 'sometext', id: 2},
      {message: 'sometext', id: 3}
     ],
     id : 3
  },
  methods: {
  	 addItem(){
            this.id++
            this.items.push({message: 'sometext', id: this.id});
        },
     enter(){
         console.log('transition enter called');
     }
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="container">
        <button @click="addItem()">Add Item</button>
        <transition-group :name="'fade'" v-on:enter="enter">
            <span v-for="item in items" v-bind:key="item.id">
               {{item.message}}
            </span>
        </transition-group>
    </div>
</div>

这篇关于如何在 Vue.js 中的单个列表元素上使用过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！