A summary of the problems that angular adds to the animation effect _angularjs

Adding "dynamic effect" is an effective means for users to perceive the behavior of the application. List is one of the most commonly used forms of interface in an application, often with the addition of rows, the deletion of rows, and the movement of rows. Imagine the added operation is simple, from large to small when deleted, and then disappear, when you add a small to large, move is deleted before adding. The feeling is not complex, should use the CSS transition can be done, but actually do it to find a lot of problems to deal with, the following one by one ways to.

Let's get some simple tests.

1, the original 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, by adding the "Remove" class, set the animation effect, add "active" to modify the CSS properties, activate the animation.

The result is not the same as thinking, two questions: 1, the animation did not run; 2, row-1 did not disappear. Why? First, the transition of CSS does not work on the properties of auto, because Row-1 did not set the height, so it does not produce animations that change from the existing height to 0. Second, height=0 only set the content area for the 0,padding did not change, so still row-1 or occupy 30px of space.

2, specify the fixed height and padding also add animation

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

This time the effect is right, row-1 from 48px to 0, while padding also changes.

3. Is there any other way? Are you sure you want to specify height? Transform, No.

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 you do not set the height, it is no problem to perform animations through transform. The problem is, Row-1 is still in the original place, still occupy space, Row-2 did not move upwards. This brings a problem, the animation finished (including the 2nd set of the example of height), row-1 did not delete, but was not visible.

4. Solve the problem of eliminating elements after animation execution

Modify CSS

Copy Code code as follows:

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

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 effect is good. There are several points of attention: 1, by registering Transitionend events can be captured to the end of the move, 2, can perform multiple dynamic, each end will produce transitionend events, through the event "PropertyName" You can tell which property is the end of the action.

5, with Velocity.js also tried a bit

CSS not set
JS Code

var ele = Document.queryselector ('. demo-5. row-1 ');
Velocity (ele, ' Slideup ', {duration:1000});

Look at the implementation of the process, but also modify the height and padding. However, Velocity uses the Requestanimationframe function. I think if the dynamic effect is relatively simple, you do not have to introduce other libraries, directly written out of the running effect almost.

6, height to understand, variable width?

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 percent, the problem of height is still present.

7, using the JS to solve the problem of 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 the height has been dynamic and normal. Other improvements can be made with reference to the previous example.

Second, a complete example

The complete example is implemented in angular. Angular the first question is what is the time to set up a dynamic effect? Because, angular is a two-way binding, if you delete an object in the controller, rendering the interface when the object is gone, so must be involved in the process of data binding. Angular provides nganimatie this animation module and tries it to do the work of updating Ngrepeat list data. However, it is not very necessary to introduce additional angular-animation.js, although not very large. In addition, I am in a already written frame page animation, if need to introduce new module, need to change frame file, I feel bad. Try the dynamic loading animation module also did not succeed, so I studied how to control the effect of the action.

Angular even if the animation module is not loaded, there is a $animate, which leaves an interface for dynamic control.
See 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 () {D Efer.resOlve ();
      });
    }, False);
  });
  });
return defer.promise; };

Ng-repeat Data Update is to call the $animate service Enters,leave and Move method, so to control the dynamic effect of their own to rewrite the corresponding method. When you rewrite it, add it with $animate and set up a problem directly on the DOM. (This section of the angular logic of the bottom, not too much to understand, but also need in-depth study.) ）

In addition, when moving the position of a row, the deletion and insertion are handled in two digest loops through $timeout, otherwise the effect is not 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 cycle closely related, read the Angular-animation.js code did not see clear, but also need in-depth study to do.