千寻前端

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

2017-12-15 10:52:30vue.js问题

很简单的一段代码：

<body>
    <ul id="app">
    	<li v-for="item in list">{{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#btc_xrp 右侧导航的列表

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

网友回答：

  • undefind_5 undefind_5 2017-12-15 11:02 回复:

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

    • jsoncode jsoncode 2017-12-15 11:15 回复:undefind_5
      用了vue，自然不会在用jq去做定时器之类的动画了

    • undefind_5 undefind_5 2017-12-15 11:20 回复:undefind_5

      jq定时器动画？哥们，你得去看看css动画的文档了，@keyframe直接就可以设置你要的效果了，只是在动画时间上你得自己调一下，如果需要你还得选择适合的动画曲率——我只是提供一种思路

  • 舍近求远 舍近求远 2017-12-15 11:06 回复:

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

    • jsoncode jsoncode 2017-12-15 11:14 回复:舍近求远
      watch是监听这个数组，但是并不知道是哪一项，或者哪几项变化

    • yikeruiqiu yikeruiqiu 2017-12-15 3:47 回复:舍近求远

      watch里面监听的就是变化的值

    • 舍近求远 舍近求远 2017-12-18 11:36 回复:舍近求远

      watch这个数组你得到了一个新的一个旧的，对比下不就知道哪个变化了

  • joy钰 joy钰 2017-12-15 11:38 回复:

    同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)
      }
    }