Summary of problems with angular animation effects, angular Animation

Summary of problems with angular animation effects, angular Animation

Adding "dynamic effects" is an effective means for users to perceive the behavior of applications. "List" is one of the most commonly used interface forms in applications. operations such as adding, deleting, and moving rows are often performed. Imagine that the operation to add is very simple. The operation to delete is from large to small, and then disappears; the operation to add is from small to large; the operation to move is to delete and then add. It seems that it is not complicated. We should use the transition of CSS to solve the problem. However, in practice, we find that there are many problems to solve. Here we will explain them one by one.

For some simple tests

1. Initial version

<div class='list'>  <div class='row-1'>row-1</div>  <div class='row-2'>row-2</div></div>

.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');

The idea is simple. Add the "remove" class, set the animation effect, add "active" to modify the css attribute, and activate the animation.

The results are different from what you want: 1. the animation is not running; 2. row-1 does not disappear. Why? First, the transition of CSS cannot apply to the auto attribute. Because row-1 does not set the height, no animation will be generated from the existing height to 0. Second, height = 0 only sets the content area to 0, and padding does not change, so row-1 still occupies 30 PX space.

2. Specify a fixed height and add an animation to the padding.

Adjust 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;}

The effect is correct this time. row-1 ranges from the 48px side to 0, and the padding also changes.

3. Is there any other way? Must I specify the height? The transform line does not work.

Modify 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);}

Even if no height is set, it is no problem to execute an animation through transform. The problem is that row-1 still occupies space, and row-2 does not move up. This leads to a problem. After the animation is executed (including 2nd examples of setting height), row-1 is not deleted, but cannot be seen.

4. solves the problem of clearing elements after an animation is executed.

Modify CSS

Copy codeThe Code is as follows:
. Demo-4. remove {-webkit-transition: height 3 s linear, padding 3 s linear, opacity 3 s linear, color. 5 s linear ;}
. Demo-4. row-1.remove.active {padding-top: 0; padding-bottom: 0; color: rgba (,); opacity: 0 ;}

Modify 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';});

This time the results are good. There are several points of attention: 1. You can capture the transitionEnd event by registering the transitionEnd event; 2. You can execute multiple animations at the same time, and a transitionEnd event will be generated when everything ends, through the "propertyName" of the event, you can know which attribute has completed its animation.

5. I tried it with velocity. js.

CSS does not need to be set
JS Code

var ele = document.querySelector('.demo-5 .row-1');Velocity(ele, 'slideUp', { duration: 1000 });

We looked at the execution process and modified the height and padding. However, velocity uses the requestAnimationFrame function. In my opinion, if the animation effect is relatively simple, you don't need to introduce other libraries, and the running effect is similar.

6. What about changing the width of the height?

Adjust CSS

.demo-6 .row-1{width:100%;}.demo-6 .remove{-webkit-transition: width 3s linear;}.demo-6 .row-1.remove.active{width:0%;}

Although the width itself can be set by percentage, the height issue still exists.

7. Use JS to solve the problem of changing width

Set 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;}

Fixed height and the animation effect is normal. For other improvements, see the previous example.

2. A complete example

The complete example is actually implemented in angular. The first question about angular implementation is when to set the animation effect? Angular is bound in two directions. If an object is deleted from the controller, the object will be lost during the rendering interface. Therefore, you must intervene in the data binding process. Angular provides the ngAnimatie animation module. After a try, it can indeed update the data in the ngRepeat list. But to introduce additional angular-animation.js, although not big, still feel not very necessary. In addition, I add an animation to a previously written frame page. If I want to introduce a new module, I need to modify the frame file. I tried to dynamically load the animation module and did not succeed. So I studied how to control the animation efficiency.

Angular has a $ animate even if it does not load the animation module, which provides an interface for animation control.
View 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 will call the enters, leave, and move methods of the $ animate service to update data. Therefore, to control the animation, you must override the corresponding method. You need to add $ animate when rewriting, and there is a problem with setting it directly on the dom. (The angular logic in this section is relatively low-level. It is not very clear and requires further research .)

In addition, when moving the row position, you need to use $ timeout to put the deletion and insertion into two digest loops for processing. Otherwise, the effect cannot be seen.

var index = records.indexOf($scope.selected),  r = records.splice(index, 1);$timeout(function(){  records.splice(index + 1, 0, r[0]);},500);

Angular animation and digest loop closely, read the angular-animation.js Code did not understand, but also need to study in depth.

Articles you may be interested in:

• Code that implements some animation effects in AngularJS applications
• How to Use ngView with AngularJS applications to achieve animation Effects
• Summary of how AngularJS displays or hides animation Effects