vue2如何实现数组的某一项变化，给这一项添加临时特效_JavaScript_论坛

vue2如何实现数组的某一项变化，给这一项添加临时特效

蒙***生分类：JavaScript 人气：987 回帖：3 发布于6年前收藏

很简单的一段代码：

<body>
    <ul id="app">
        <li v-for="item in list" class="alert alert-danger">{{item}}</li>
    </ul>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[1,2,3]
            },
            mounted:function () {
                var vm = this;
                setTimeout(function () {
                    vm.list[0] = 10;
                },1000);
            }
        })
    </script>
</body>

想实现一个效果：数组的某一项变化时，这个li的样式会有一个颜色由红到白的渐变，很短暂，0.5s就渐渐消失的一个红色背景。
类似这个https://poloniex.com/exchange... 右侧导航的列表

查阅了vue2的过度实现方案，没有对应的案例，我没搞出来
vue 过度效果：https://cn.vuejs.org/v2/guide...

标签：vue.js javascript

讨论这个帖子（3）垃圾回帖将一律封号处理……

Lv3 码奴

xi***xu 职业无 6年前#1

watch这个数组,变化的时候判断是哪一项变了，记录索引然后绑定个样式，用css3自己写个动画就好了

Lv5 码农

38***38 职业无 6年前#2

同watch数组，比对新旧数组哪几个项发生了变化，记录索引进行相关操作。
还有你这样修改数组项无法触发响应式更新。

    mounted:function () {
      var vm = this;
      var newList = vm.list.concat();
      
      setTimeout(function () {
          newList[0] = 233;
          vm.list = newList;
      },1000);
    },
    watch:{
      list(newArr, oldArr){
        var result = oldArr.reduce((iter, v, i) => {
          if(v !== newArr[i]) iter.push(i);
          return iter;
        }, [])
        console.log(result)
      }
    }

Lv3 码奴

空***子职业无 6年前#3

我觉得你可以结合css动画来实现吧，通过:class绑定一个对应的动画类样式名，条件的话你得自己把控了。看这个思路适合你不

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取