vue.js v-for 项目上的动画属性更改答案

【问题标题】：animating property changes on vue.js v-for itemsvue.js v-for 项目上的动画属性更改
【发布时间】：2018-04-28 21:03:10
【问题描述】：

我正在开发一个得来速餐厅模拟器。汽车在vue.js 模型中表示为列表项。当他们在队列中前进时，我想为他们的位置变化制作动画。基于vue.js documentation，我应该使用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>

和组件：

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
           },
        ...
 }

关于如何制作这些动画有什么建议吗？

值的变化发生在计时器上：setInterval(update_all_items, 1000)

您可以在此处查看 codepen 示例：https://codepen.io/anon/pen/GdrEjj

使用 vue.js 文档中的示例，显示每秒更改的属性以及与更新相关的跳跃性。这种跳动我想补间。

【问题讨论】：

您想在单击时为项目设置动画？
根据您更新它们的操作和数据结构，您可能需要使用Vue.set
过渡可能适合您，具体取决于您

标签： javascript vue.js

【解决方案1】：

这是一个解决方案，从外部动画。

codepen 示例here

<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>

【讨论】：