VueJS在新数据视图上添加转换

Question

我想在VueJS上为新创建的元素添加一些过渡效果.如下面的代码,如果我使用输入字段创建一个新的列表元素,我希望它使用'淡入淡出'或'滑入'效果出现.我无法从官方文档中找出答案.我怎样才能做到这一点？

var vm = new Vue({
    el: "#vue-instance",
    data: {
        newelement: '',
        list: []
    },
    methods: {
        addelement: function() {
            this.list.push(this.newelement);
            this.newelement = '';
        }
    }
});

<div id="vue-instance">
    <input type="text" v-model="newelement" @keyup.enter="addelement">
    <ul v-for="element in list">
        <li>{{ element }}</li>
    </ul>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

Answer 1

根据官方文档,你需要用一个transition元素包装你循环.并指定a name和a(可选)tag属性.

像这样:

<transition-group name="list" tag="p">
    <span v-for="item in list" class="list-item"></span>
</transition-group>

并添加一些带有转换名称的css类:

.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}

更多信息,请访问https://vuejs.org/v2/guide/transitions.html#List-Transitions