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

【问题标题】：VueJS adding transition on new data viewVueJS 在新数据视图上添加转换
【发布时间】：2016-08-11 10:14:04
【问题描述】：

我想在 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>

【问题讨论】：

你试过了吗：vuejs.org/guide/transitions.html？
@GONG，我读过，但不知道在我的情况下如何做。从官方文档看来，transition 只能与 v-if、v-show 等一起使用。但我这里没有。
<ul v-for="element in list" transition="fade"> 尝试这种方式，它应该可以工作。根据文档“过渡属性可以与：v-for（仅触发插入和删除）一起使用”
不工作。我错过了什么吗？可以举个例子吗？
当然，请检查我的答案。如果您觉得有用，请将其标记为最佳。

标签： vue.js

【解决方案1】：

根据官方文档，您需要用 transition 元素包裹您的循环。并指定一个name 和一个（可选的）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);
}

【讨论】：

始终欢迎提供指向潜在解决方案的链接，但请add context around the link，以便您的其他用户知道它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。考虑到仅仅是指向外部站点的链接是Why and how are some answers deleted? 的一个可能原因。
@FrankerZ 感谢您的建议，现已修复
@GONG，感谢您的解决方案。但是根据文档，您在解决方案中使用了“动态绑定”。如果没有动态绑定，它就无法工作。为什么？
哎呀，对不起。我用“：transition”尝试过，菜鸟错误。现在好了。不知道为什么我不能让它早点工作。还是谢谢。
这在 2018 年不起作用。此外，答案包括指向第 3 方插件的链接。这应该被披露。