OLD | NEW |
(Empty) | |
| 1 part of angular.animate; |
| 2 |
| 3 /** |
| 4 * [Animation] implementation for handling the standard angular 'event' and |
| 5 * 'event-active' class pattern with css. This will compute transition and |
| 6 * animation duration from the css classes and use it to complete futures when |
| 7 * the css animations complete. |
| 8 */ |
| 9 class CssAnimation extends LoopedAnimation { |
| 10 final CssAnimationMap _animationMap; |
| 11 final AnimationOptimizer _optimizer; |
| 12 |
| 13 final dom.Element element; |
| 14 final String addAtStart; |
| 15 final String addAtEnd; |
| 16 final String removeAtStart; |
| 17 final String removeAtEnd; |
| 18 |
| 19 final String eventClass; |
| 20 final String activeClass; |
| 21 |
| 22 final _completer = new Completer<AnimationResult>.sync(); |
| 23 |
| 24 static const EXTRA_DURATION = 16.0; // Just a little extra time |
| 25 |
| 26 bool _active = true; |
| 27 bool _started = false; |
| 28 bool _isDisplayNone = false; |
| 29 |
| 30 Future<AnimationResult> get onCompleted => _completer.future; |
| 31 |
| 32 num _startTime; |
| 33 num _duration; |
| 34 |
| 35 CssAnimation( |
| 36 this.element, |
| 37 this.eventClass, |
| 38 this.activeClass, |
| 39 { this.addAtStart, |
| 40 this.removeAtStart, |
| 41 this.addAtEnd, |
| 42 this.removeAtEnd, |
| 43 CssAnimationMap animationMap, |
| 44 AnimationOptimizer optimizer }) |
| 45 : _animationMap = animationMap, |
| 46 _optimizer = optimizer |
| 47 { |
| 48 if (_optimizer != null) _optimizer.track(this, element); |
| 49 if (_animationMap != null) _animationMap.track(this); |
| 50 element.classes.add(eventClass); |
| 51 if (addAtStart != null) element.classes.add(addAtStart); |
| 52 if (removeAtStart != null) element.classes.remove(removeAtStart); |
| 53 } |
| 54 |
| 55 void read(num timeInMs) { |
| 56 if (_active && _startTime == null) { |
| 57 _startTime = timeInMs; |
| 58 var style = element.getComputedStyle(); |
| 59 _isDisplayNone = style.display == "none"; |
| 60 _duration = util.computeLongestTransition(style); |
| 61 if (_duration > 0.0) { |
| 62 // Add a little extra time just to make sure transitions |
| 63 // fully complete and that we don't remove the animation classes |
| 64 // before it's completed. |
| 65 _duration = _duration + EXTRA_DURATION; |
| 66 } |
| 67 } |
| 68 } |
| 69 |
| 70 bool update(num timeInMs) { |
| 71 if (!_active) return false; |
| 72 |
| 73 if (timeInMs >= _startTime + _duration) { |
| 74 _complete(AnimationResult.COMPLETED); |
| 75 |
| 76 // TODO(codelogic): If the initial frame takes a significant amount of |
| 77 // time, the computed duration + startTime might not actually represent |
| 78 // the end of the animation |
| 79 // Done with the animation |
| 80 return false; |
| 81 } else if (!_started) { |
| 82 // This will always run after the first animationFrame is queued so that |
| 83 // inserted elements have the base event class applied before adding the |
| 84 // active class to the element. If this is not done, inserted dom nodes |
| 85 // will not run their enter animation. |
| 86 |
| 87 if (_isDisplayNone && removeAtEnd != null) { |
| 88 element.classes.remove(removeAtEnd); |
| 89 } |
| 90 |
| 91 element.classes.add(activeClass); |
| 92 _started = true; |
| 93 } |
| 94 |
| 95 // Continue updating |
| 96 return true; |
| 97 } |
| 98 |
| 99 void cancel() { |
| 100 if (_active) { |
| 101 _detach(); |
| 102 if (addAtStart != null) element.classes.remove(addAtStart); |
| 103 if (removeAtStart != null) element.classes.add(removeAtStart); |
| 104 if (_completer != null) _completer.complete(AnimationResult.CANCELED); |
| 105 } |
| 106 } |
| 107 |
| 108 void complete() { |
| 109 _complete(AnimationResult.COMPLETED_IGNORED); |
| 110 } |
| 111 |
| 112 // Since there are two different ways to 'complete' an animation, this lets us |
| 113 // configure the final result. |
| 114 void _complete(AnimationResult result) { |
| 115 if (_active) { |
| 116 _detach(); |
| 117 if (addAtEnd != null) element.classes.add(addAtEnd); |
| 118 if (removeAtEnd != null) element.classes.remove(removeAtEnd); |
| 119 _completer.complete(result); |
| 120 } |
| 121 } |
| 122 |
| 123 // Cleanup css event classes. |
| 124 void _detach() { |
| 125 _active = false; |
| 126 |
| 127 if (_animationMap != null) _animationMap.forget(this); |
| 128 if (_optimizer != null) _optimizer.forget(this); |
| 129 |
| 130 element.classes..remove(eventClass)..remove(activeClass); |
| 131 } |
| 132 } |
OLD | NEW |