加入「動效」是讓使用者對應用的行為進行感知的一種有效手段。「列表」是應用中最常使用的一種介面形式，經常會有新增行，刪除行，移動行這些操作。設想新增的操作很簡單，刪除時從大到小，然後消失；新增時從小到大；移動就是先刪除再新增。感覺上並不複雜，應該利用css的transition就能搞定，可是實際做起來發現有不少問題要處理，下面一一道來。
來些簡單的測試
1、最初的版本
row-1
row-2
.list
.row-1
.row-2
/*demo1*/
.demo-1 .remove
.demo-1 .remove.active
var ele = document.queryselector('.demo-1 .row-1');
ele.classlist.add('remove');
ele.classlist.add('active');
想法很簡單，通過新增「remove」類，設定動畫的效果，新增「active」修改css屬性，啟用動畫。
結果和想的不一樣，兩個問題：1、動畫並沒有執行；2、row-1並沒有消失。為什麼？首先，css的transition不能作用於auto的屬性，因為row-1本來並沒有設定height，所以不會產生從現有的高度變到0的動畫。第二，height=0只是設定了content區域為0，程式設計客棧padding並沒有改變，所以還是row-1還是佔據了30px的空間。
2、指定固定的height並且padding也加上動畫
調整css
/*demo2*/
.demo-2 .row-1
.demo-2 .remove
.demo-2 .row-1.remove.active
這次的效果是對的，row-1從48px邊到0，同時padding也跟著變。
3、還有沒有別的辦法呢？一定要指定height嗎？transform行不行
修改css
/*demo3*/
.demo-3 .remove
.demo-3 .row-1.remove.active
即使沒有設定height，通過transform執行動畫也是沒有問題的。問題是，row-1還在原來的地方，還佔著空間，row-2並沒有向上挪。由此帶來個問題，動畫執行完了（包括第2個設定height的例子），row-1並沒有刪除掉，只是看不見了。
4、解決動畫執行完清除元素的問題
修改css
複製** **如下:
.demo-4 .remove
.demo-4 .row-1.remove.active
修改js
var ele, l;
ele = document.queryselector('.demo-4 .row-1');
l = ele.addeventlistener('webkittransitionend', function(evt)
}, false);
ele.style.he = ele.offsetheight + 'px';
ele.classlist.add('remove');
$timeout(function());
這次的效果不錯。有幾個注意的地方：1、通過註冊transitionend事件可以捕獲到動結束；2、可以同時執行多個動效，每個東西結束都會產生transitionend事件，通過事件的「propertyname」可以知道是哪個屬性的動效結束了。
5、用velocity.js也試了一下
css不用設定
js**
var ele = document.queryselector('.demo-5 .row-1');
velocity(ele, 'slideup', );
看了看執行的過程，也是修改height和padding。但是，velocity用的是requestanimationframe函式。我認為如果動效比較簡單，就不用引入其他的庫了，直接寫出來的執行效果差不多。
6、高度搞明白了，變寬度呢？
調整css
.demo-6 .row-1
.demo-6 .remove
.demo-6 .row-1.remove.active
雖然寬本身可以通過百分比進行設定，但是height不固定的問題還是存在。
7、用上js解決變width的問題
設定css
.demo-7 .row-1
.demo-7 .remove
.demo-7 .row-1.remove.active
固定了height已有動效正常了。其他的改進可參照前面的例子了。
二、乙個完整的例子
完整的例子實在angular中實現的。angular實現首先乙個問題就是在什麼時機設定動效？因為，angular是雙向繫結的，如果在controller中刪除了乙個物件，渲染介面的時候這個物件就沒了，所以必須介入到資料繫結的過程中。angular提供nganimatie這個動畫模組，試了一下它也確實可以完成ngrepeat列表資料更新的動效。但是要額外引入angular-animation.js，雖然不大，還是覺得不是很有必要。另外，我是在乙個已經寫好的框架頁面上加動畫，如果需要引入新的module，需要改框架檔案，我覺得不好。試了試動態載入animation模組也沒成功，所以就研究了一下自己怎麼控制動效。
angular即使不載入animation模組，也有乙個$animate，它為動效控制留出了介面。
看jsvar fnenter = $animate.enter,
fnle**e = $animate.le**e;
$animate.enter = function() ;
fnenter.call($animate, e, p, a, options).then(function() , false);
});});
return defer.promise;
};$animate.le**e = function() );
}, false);
});});
return defer.promise;
};ng-repeat進行資料更新是會呼叫$animate服務的enters，le**e和move方法，所以，要自己控制動效就要重寫對應的方法。重寫的時候要用$animate新增，直接在dom上設定有問題。（這一段的angular的邏輯比較底層，沒有太看明白，還需要深入研究。）
另外，在移動行的位置時，要通過$timeout將刪除和插入放到兩個digest迴圈中處理，否則看不出效果。
var index = records.indexof($scope.selected)程式設計客棧,
r = records.splice(index, 1);
$timeout(function(),500);
angular的動畫和digest迴圈關係密切，看了angular-animation.js的**沒看明白，還需要深入研究才行。
本文標題: 給angular加上動畫效遇到的問題總結
本文位址: /ruanjian/j**a/142641.html
libsvm在matlab中遇到的問題總結
包含libsvm四個exe程式包，我們所用的庫就是它們，然後在matlab命令框輸入 1.mex setup 2.選擇vc 3.之後輸入make 問題一 error d libsvm libsvm 3.21 matlab make.m failed line 13 未找到 e 百葉通 matlab ...
在angular打包優化中遇到的問題 記錄
正常是ng build 優化打包方式 ng build prod aot 使用這個打包的時候 報錯 這個寫法的是 publicservice只能在constructor中使用，所以應該改為 即可解決問題 還有一部分報錯 是因為 平時 不注意規則 不太標準 以及html頁面裡有無用字段造成的 使用如上...
關於「foreach迴圈」中遇到的幾個問題總結
1.列表頁面用 foreach迴圈 的時候資料沒有顯示，此時需要檢查你物件模型中屬性的首字母是否大寫，切記不能大寫 本人在做乙個專案的時候，物件模型是別人建立的，屬性首字母大寫了，導致最後列表頁面資料不顯示，後來一問老師，說改為小寫，瞬間好了 2.資料儲存不到表裡 在對映檔案中沒有指定資料表列名的時...