runTransition method

void runTransition(String propertyName, dynamic begin, dynamic end)

Implementation

void runTransition(String propertyName, begin, end) {
  if (_hasRunningTransition(propertyName)) {
    Animation animation = _propertyRunningTransition[propertyName]!;
    animation.cancel();

    // An Event fired when a CSS transition has been cancelled.
    target.dispatchEvent(Event(EVENT_TRANSITION_CANCEL));

    // Maybe set transition twice in a same frame. should check animationProperties has contains propertyName.
    if (_animationProperties.containsKey(propertyName)) {
      begin = _animationProperties[propertyName];
    }
  }

  if (begin == null) {
    begin = CSSInitialValues[propertyName];
    if (begin == CURRENT_COLOR) {
      begin = currentColor;
    }
  }

  EffectTiming? options = getTransitionEffectTiming(propertyName);

  List<Keyframe> keyframes = [
    Keyframe(propertyName, begin, 0, LINEAR),
    Keyframe(propertyName, end, 1, LINEAR),
  ];
  KeyframeEffect effect = KeyframeEffect(this, target, keyframes, options);
  Animation animation = Animation(effect);
  _propertyRunningTransition[propertyName] = animation;

  animation.onstart = () {
    // An Event fired when a CSS transition is created,
    // when it is added to a set of running transitions,
    // though not necessarily started.
    target.dispatchEvent(Event(EVENT_TRANSITION_START));
  };

  animation.onfinish = (AnimationPlaybackEvent event) {
    _propertyRunningTransition.remove(propertyName);
    target.setRenderStyle(propertyName, end);
    // An Event fired when a CSS transition has finished playing.
    target.dispatchEvent(Event(EVENT_TRANSITION_END));
  };

  target.dispatchEvent(Event(EVENT_TRANSITION_RUN));

  animation.play();
}