摘要:還有沒有別的辦法呢一定要指定嗎行不行修改即使沒有設置,通過執行動畫也是沒有問題的。解決動畫執行完清除元素的問題修改修改這次的效果不錯。用上解決變的問題設置固定了已有動效正常了。
加入“動效”是讓用戶對應用的行為進行感知的一種有效手段?!傲斜怼笔菓弥凶畛J褂玫囊环N界面形式,經常會有添加行,刪除行,移動行這些操作。設想添加的操作很簡單,刪除時從大到小,然后消失;添加時從小到大;移動就是先刪除再添加。感覺上并不復雜,應該利用CSS的transition就能搞定,可是實際做起來發現有不少問題要處理,下面一一道來。
來些簡單的測試 1、最初的版本row-1row-2
.list{margin:20px;background:#eee;font-size:18px;color:white;} .row-1{background:green;overflow:hidden;padding:15px;} .row-2{background:blue;padding:15px;} /*demo1*/ .demo-1 .remove{-webkit-transition: height 3s linear;} .demo-1 .remove.active{height:0;}
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{height:48px;} .demo-2 .remove{-webkit-transition: height 3s linear, padding-top 3s linear;} .demo-2 .row-1.remove.active{height:0;padding-top:0;padding-bottom:0;}
這次的效果是對的,row-1從48px邊到0,同時padding也跟著變。
3、還有沒有別的辦法呢?一定要指定height嗎?transform行不行修改CSS
/*demo3*/ .demo-3 .remove{-webkit-transition: -webkit-transform 3s linear,padding 0s linear 3s;} .demo-3 .row-1.remove.active{-webkit-transform-origin:0 0;-webkit-transform:scaleY(0);}
即使沒有設置height,通過transform執行動畫也是沒有問題的。問題是,row-1還在原來的地方,還占著空間,row-2并沒有向上挪。由此帶來個問題,動畫執行完了(包括第2個設置height的例子),row-1并沒有刪除掉,只是看不見了。
修改CSS
.demo-4 .remove{-webkit-transition: height 3s linear, padding 3s linear, opacity 3s linear,color .5s linear;} .demo-4 .row-1.remove.active{padding-top:0;padding-bottom:0;color:rgba(0,0,0,0);opacity:0;}
修改JS
var ele, l; ele = document.querySelector(".demo-4 .row-1"); l = ele.addEventListener("webkitTransitionEnd", function(evt){ if (evt.propertyName === "height") { ele.style.display = "none"; ele.style.height = ""; ele.removeEventListener("webkitTransitionEnd", l, false); } }, false); ele.style.height = ele.offsetHeight + "px"; ele.classList.add("remove"); $timeout(function(){ ele.classList.add("active"); ele.style.height = "0px"; });
這次的效果不錯。有幾個注意的地方:1、通過注冊transitionEnd事件可以捕獲到動結束;2、可以同時執行多個動效,每個東西結束都會產生transitionEnd事件,通過事件的“propertyName”可以知道是哪個屬性的動效結束了。
5、用velocity.js也試了一下CSS不用設置
JS代碼
var ele = document.querySelector(".demo-5 .row-1"); Velocity(ele, "slideUp", { duration: 1000 });
看了看執行的過程,也是修改height和padding。但是,velocity用的是requestAnimationFrame函數。我認為如果動效比較簡單,就不用引入其他的庫了,直接寫出來的運行效果差不多。
6、高度搞明白了,變寬度呢?調整CSS
.demo-6 .row-1{width:100%;} .demo-6 .remove{-webkit-transition: width 3s linear;} .demo-6 .row-1.remove.active{width:0%;}
雖然寬本身可以通過百分比進行設置,但是height不固定的問題還是存在。
7、用上JS解決變width的問題設置CSS
.demo-7 .row-1{width:100%;height:48px;} .demo-7 .remove{-webkit-transition: width 3s linear, opacity 3s ease;} .demo-7 .row-1.remove.active{width:0%;opacity:0;}
固定了height已有動效正常了。其他的改進可參照前面的例子了。
二、一個完整的例子完整的例子實在angular中實現的。angular實現首先一個問題就是在什么時機設置動效?因為,angular是雙向綁定的,如果在controller中刪除了一個對象,渲染界面的時候這個對象就沒了,所以必須介入到數據綁定的過程中。angular提供ngAnimatie這個動畫模塊,試了一下它也確實可以完成ngRepeat列表數據更新的動效。但是要額外引入angular-animation.js,雖然不大,還是覺得不是很有必要。另外,我是在一個已經寫好的框架頁面上加動畫,如果需要引入新的module,需要改框架文件,我覺得不好。試了試動態加載animation模塊也沒成功,所以就研究了一下自己怎么控制動效。
angular即使不加載animation模塊,也有一個$animate,它為動效控制留出了接口。
看JS
var fnEnter = $animate.enter, fnLeave = $animate.leave; $animate.enter = function() { var defer = $q.defer(), e = arguments[0], p = arguments[1], a = arguments[2], options = { addClass: "ng-enter" }; fnEnter.call($animate, e, p, a, options).then(function() { $animate.addClass(e, "ng-enter-active").then(function(){ var l = e[0].addEventListener("webkitTransitionEnd", function(){ e[0].classList.remove("ng-enter-active"); e[0].classList.remove("ng-enter"); e[0].removeEventListener("webkitTransitionEnd", l, false); defer.resolve(); }, false); }); }); return defer.promise; }; $animate.leave = function() { var defer = $q.defer(), e = arguments[0]; $animate.addClass(e, "ng-leave").then(function(){ $animate.addClass(e, "ng-leave-active").then(function(){ var l = e[0].addEventListener("webkitTransitionEnd", function(){ fnLeave.call($animate, e).then(function(){ defer.resolve(); }); }, false); }); }); return defer.promise; };
ng-repeat進行數據更新是會調用$animate服務的enters,leave和move方法,所以,要自己控制動效就要重寫對應的方法。重寫的時候要用$animate添加,直接在dom上設置有問題。(這一段的angular的邏輯比較底層,沒有太看明白,還需要深入研究。)
另外,在移動行的位置時,要通過$timeout將刪除和插入放到兩個digest循環中處理,否則看不出效果。
var index = records.indexOf($scope.selected), r = records.splice(index, 1); $timeout(function(){ records.splice(index + 1, 0, r[0]); },500);
angular的動畫和digest循環關系密切,看了angular-animation.js的代碼沒看明白,還需要深入研究才行。
示例基礎的示例
完整示例
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78664.html
摘要:還有沒有別的辦法呢一定要指定嗎行不行修改即使沒有設置,通過執行動畫也是沒有問題的。解決動畫執行完清除元素的問題修改修改這次的效果不錯。用上解決變的問題設置固定了已有動效正常了。 加入動效是讓用戶對應用的行為進行感知的一種有效手段。列表是應用中最常使用的一種界面形式,經常會有添加行,刪除行,移動行這些操作。設想添加的操作很簡單,刪除時從大到小,然后消失;添加時從小到大;移動就是先刪除再添...
摘要:從最重要的頁面開始吧錦標賽的表格。重啟你的應用,看看搜索框。然后我們加入兩個路由一個轉向錦標賽表格,另一個轉向車手詳情。你所需要做的只是創建一個名為的文件,然后將錦標賽表格放在那里。結論我們已經介紹了開發一個簡單應用所需的一切。 AngularJS是Google開源出來的一款 Javascript MVC 框架。利用AngularJS,你可以構建結構清晰、便于測試和維護的前端應用。 ...
摘要:背景作為單頁大型應用的框架愛好者的我,不實現個大型應用練練手怎么趕說自己熟練,于是嘗試實現了大部分的進銷存功能。本文主要對實現業務需求中遇到的問題以及解決方案進行闡述。不確保對其他項目有可移植性。 背景 作為單頁大型應用的mv*框架AngularJS愛好者的我,不實現個大型web應用練練手怎么趕說自己熟練ng,于是嘗試實現了大部分erp的進銷存功能。本文主要對實現業務需求中遇到的問題以...
摘要:本文針對的讀者具備性能優化的相關知識雅虎條性能優化原則高性能網站建設指南等擁有實戰經驗。這種機制能減少瀏覽器次數,從而提高性能。僅會檢查該和它的子,當你確定當前操作僅影響它們時,用可以稍微提升性能。 搬運自: http://atian25.github.io/2014/05/09/angular-performace/ 不知不覺,在項目中用angular已經半年多了,踩了很多坑...
閱讀 1767·2023-04-26 01:41
閱讀 3073·2021-11-23 09:51
閱讀 2733·2021-10-09 09:43
閱讀 9019·2021-09-22 15:13
閱讀 2452·2021-09-07 09:59
閱讀 2624·2019-08-30 15:44
閱讀 1132·2019-08-30 12:45
閱讀 2616·2019-08-30 12:43