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