in src/web/Animated.tsx [651:712]
private _updateTransition() {
// We should never get here if the component isn't mounted,
// but we'll add this additional protection.
if (!this._mountedComponent) {
return;
}
const activeTransitions: TransitionSpec[] = [];
_.each(this._animatedAttributes, attrib => {
if (attrib.activeTransition) {
activeTransitions.push(attrib.activeTransition);
}
});
// If there are any transform transitions, we need to combine
// these into a single transition. That means we can't specify
// different durations, delays or easing functions for each. That's
// an unfortunate limitation of CSS.
const keys = _.keys(this._animatedTransforms);
const index = _.findIndex(keys, key => !!this._animatedTransforms[key].activeTransition);
if (index >= 0) {
const transformTransition = this._animatedTransforms[keys[index]].activeTransition!;
activeTransitions.push({
property: 'transform',
from: this._generateCssTransformList(false),
to: this._generateCssTransformList(true),
duration: transformTransition.duration,
timing: transformTransition.timing,
delay: transformTransition.delay,
});
}
if (activeTransitions.length > 0) {
const domNode = this._getDomNode();
if (domNode) {
executeTransition(domNode, activeTransitions, () => {
// Clear all of the active transitions and invoke the onEnd callbacks.
const completeTransitions: ExtendedTransition[] = [];
_.each(this._animatedAttributes, attrib => {
if (attrib.activeTransition) {
completeTransitions.push(attrib.activeTransition);
delete attrib.activeTransition;
}
});
_.each(this._animatedTransforms, transform => {
if (transform.activeTransition) {
completeTransitions.push(transform.activeTransition);
delete transform.activeTransition;
}
});
_.each(completeTransitions, transition => {
if (transition.onEnd) {
transition.onEnd({ finished: true });
}
});
});
}
}
}