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

根据官方文档，你需要用$(function(){ document.getElementById("gorightslide").click(function(){ if(!hasClass(this, 'diactiveisbtn')){ this.className += " diactiveisbtn"; document.getElementById("goleftslide").className = document.getElementById("goleftslide").className.replace(/\diactiveisbtn\b/,''); document.getElementById("oneblockshowblog").style.display = "none"; fadeIn(document.getElementById("twoblockshowblog")); } }); document.getElementById("goleftslide").click(function(){ if(!hasClass(this, 'diactiveisbtn')){ this.className += " diactiveisbtn"; document.getElementById("gorightslide").className = document.getElementById("gorightslide").className.replace(/\diactiveisbtn\b/,''); document.getElementById("twoblockshowblog").style.display = "none"; fadeIn(document.getElementById("oneblockshowblog")); } }); }); function hasClass(element, cls) { return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; } function fadeIn(el) { el.style.opacity = 0; var last = +new Date(); var tick = function() { el.style.opacity = +el.style.opacity + (new Date() - last) / 400; last = +new Date(); if (+el.style.opacity < 1) { (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16); } }; tick(); }元素包裹你。并指定transition和（可选）name属性。

像这样：

tag

添加一些名为transition的css类：

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

https://vuejs.org/v2/guide/transitions.html#List-Transitions

的更多信息

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

1 个答案: