Javascript 在vue.js v-for项目上设置属性更改动画_Javascript_Vue.js

Javascript 在vue.js v-for项目上设置属性更改动画

javascript vue.js

Javascript 在vue.js v-for项目上设置属性更改动画,javascript,vue.js,Javascript,Vue.js,我正在做一个免下车餐厅模拟器。汽车在vue.js模型中表示为列表项。当他们在队列中前进时，我想设置他们位置变化的动画。基于此，我应该使用watch和computed，但我看不到一种方法可以将它们用于v-for元素 <div id="app"> <svg width="100%" height="200"> <g v-for="item in allitems" v-bind:item="item" v-bind:ke

我正在做一个免下车餐厅模拟器。汽车在

vue.js

模型中表示为列表项。当他们在队列中前进时，我想设置他们位置变化的动画。基于此，我应该使用

watch

和

computed

，但我看不到一种方法可以将它们用于

v-for

元素

<div id="app">
<svg width="100%" height="200">
    <g
       v-for="item in allitems"
       v-bind:item="item"
       v-bind:key="item.id">
          <image :x="xx(item.stationIdx, item.placeInLine)" :y="yy(item.placeInLine)" width="80" height="40" :xlink:href="carfile(item.id)" />
    </g>
</svg>

对如何制作这些动画有什么建议吗

值的变化发生在计时器上：

setInterval（更新所有项目，1000）

您可以在此处看到一个代码笔示例：

使用vue.js文档中的一个示例，显示每秒钟更改一次的属性，以及与更新相关的跳跃性。我想消除这种紧张情绪。

这里有一个解决方案，从外部设置动画

代码笔示例


☞ {{item.text}
var app=新的Vue({
el:“#应用程序”，
数据：{
杂货店老板：[
{id:0，文本：“蔬菜”，x:0}，
{id:1，文本：'Cheese'，x:0}，
{id:2，text:'其他人类应该吃的东西'，x:0}
]
},
方法：{
yy：功能（id）{
返回30+id*20；
},
id2elem:函数（id）{
返回“项目”+id；
}
}
});
函数步骤（）{
_.每个（app.groceryList，函数（项）{
item.x+=Math.random（）*10
item.x=Math.round（item.x+Math.random（）*10）；
var itemid=“#item_”+item.id；
console.log（'tweening item['+itemid+']到['+item.x+']））
TweenMax.to（itemid，1，{attr:{x:+item.x}）；
});
}
intervalID=设置间隔（步骤1000）；

是否要在单击时为项目设置动画？根据您更新项目的操作和数据结构，您可能需要使用

Vue。set

transition可能适合您，具体取决于

var app = new Vue({
    el: '#app',
    data: { 
       allitems : allitems,
    },
    methods: {
        xx: function(istation, placeInLine) {
            // compute the X location of the car based on its current state
            // I'D LIKE TO ANIMATE / TWEEN THIS PROPERTY
           },
        ...
 }

<html>
<head>
    <script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
</head>

<body>
    <div id="app">
        <svg width="100%" height="200">
            <g
                v-for="item in groceryList"
                v-bind:item="item"
                v-bind:key="item.id">
                <text :id="id2elem(item.id)" x="0" :y="yy(item.id)" font-family="Verdana" font-size="15">
                    ☞ {{item.text}}
                </text>
            </g>
        </svg>
    </div>

    <script>

    var app = new Vue({
        el: '#app',
        data: {
            groceryList: [
            { id: 0, text: 'Vegetables', x:0 },
            { id: 1, text: 'Cheese', x:0 },
            { id: 2, text: 'Whatever else humans are supposed to eat', x:0 }
            ]
        },
        methods: {
            yy: function(id) {
                return 30+id*20;
            },
            id2elem: function(id) {
                return "item_"+id;
            }
        }
    });

    function step() {
        _.each(app.groceryList, function(item){
            item.x +=Math.random() * 10
            item.x = Math.round(item.x + Math.random() * 10);
            var itemid = "#item_"+item.id;
            console.log('tweening item [' + itemid + '] to [' + item.x + ']')
            TweenMax.to(itemid, 1, { attr: {x : ""+item.x}} );
        });
    }
    intervalID = setInterval(step, 1000);

    </script>
</body>