鍍金池/ 問答/HTML/ vue2如何實(shí)現(xiàn)數(shù)組的某一項(xiàng)變化，給這一項(xiàng)添加臨時(shí)特效

vue2如何實(shí)現(xiàn)數(shù)組的某一項(xiàng)變化，給這一項(xiàng)添加臨時(shí)特效

很簡單的一段代碼：

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

想實(shí)現(xiàn)一個(gè)效果：數(shù)組的某一項(xiàng)變化時(shí)，這個(gè)li的樣式會(huì)有一個(gè)顏色由紅到白的漸變，很短暫，0.5s就漸漸消失的一個(gè)紅色背景。
類似這個(gè)https://poloniex.com/exchange... 右側(cè)導(dǎo)航的列表

查閱了vue2的過度實(shí)現(xiàn)方案，沒有對應(yīng)的案例，我沒搞出來
vue 過度效果：https://cn.vuejs.org/v2/guide...

回答
編輯回答
乖乖噠

watch這個(gè)數(shù)組,變化的時(shí)候判斷是哪一項(xiàng)變了，記錄索引然后綁定個(gè)樣式，用css3自己寫個(gè)動(dòng)畫就好了

2017年6月18日 00:50
編輯回答
念舊

同watch數(shù)組，比對新舊數(shù)組哪幾個(gè)項(xiàng)發(fā)生了變化，記錄索引進(jìn)行相關(guān)操作。
還有你這樣修改數(shù)組項(xiàng)無法觸發(fā)響應(yīng)式更新。

    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)
      }
    }
2017年10月21日 21:03
編輯回答
影魅

我覺得你可以結(jié)合css動(dòng)畫來實(shí)現(xiàn)吧，通過:class綁定一個(gè)對應(yīng)的動(dòng)畫類樣式名，條件的話你得自己把控了?？催@個(gè)思路適合你不

2018年3月18日 04:01