Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: transition #542

Merged
merged 3 commits into from
Aug 4, 2021
Merged

fix: transition #542

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
163c39b
fix: transform style comparison should be converted to matrix4 value
temper357 Jul 28, 2021
5497fbb
fix: should not add item to list in forEach
temper357 Jul 28, 2021
a588021
fix: transition should be disabled when duration is 0.
temper357 Jul 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions kraken/lib/src/css/animation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,12 +100,11 @@ class AnimationTimeline {

List<Animation> _getActiveAnimations() {
List<Animation> activeAnimations = [];

for (Animation animation in _animations) {
AnimationPlayState playState = animation.playState;
if (playState != AnimationPlayState.finished && playState != AnimationPlayState.idle) {
activeAnimations.add(animation);
} else {
animation._tick(_currentTime);
}
}
return activeAnimations;
Expand Down
38 changes: 30 additions & 8 deletions kraken/lib/src/css/style_declaration.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
*/
import 'dart:ui';

import 'package:vector_math/vector_math_64.dart';
import 'package:kraken/css.dart';
import 'package:kraken/dom.dart';
import 'package:kraken/rendering.dart';
Expand Down Expand Up @@ -143,8 +144,20 @@ class CSSStyleDeclaration {
if ((prevValue == null && CSSLength.isAuto(CSSInitialValues[property])) || CSSLength.isAuto(prevValue) || CSSLength.isAuto(nextValue)) {
return false;
}
return CSSTransformHandlers[property] != null &&
(_transitions.containsKey(property) || _transitions.containsKey(ALL));

if (CSSTransformHandlers[property] != null &&
(_transitions.containsKey(property) || _transitions.containsKey(ALL))) {
bool shouldTransition = false;
// Transtion will be disabled when all transition has transitionDuration as 0.
_transitions.forEach((String transitionKey, List transitionOptions) {
double duration = CSSTime.parseTime(transitionOptions[0]).toDouble();
if (duration != 0) {
shouldTransition = true;
}
});
return shouldTransition;
}
return false;
}

EffectTiming? _getTransitionEffectTiming(String property) {
Expand Down Expand Up @@ -213,7 +226,7 @@ class CSSStyleDeclaration {
};

animation.onfinish = (AnimationPlaybackEvent event) {
_setTransitionEndProperty(propertyName, end);
_setTransitionEndProperty(propertyName, begin, end);
_propertyRunningTransition.remove(propertyName);
CSSTransition.dispatchTransitionEvent(target, CSSTransitionEvent.end);
};
Expand All @@ -222,8 +235,7 @@ class CSSStyleDeclaration {
animation.play();
}

_setTransitionEndProperty(String propertyName, value) {
String? prevValue = _properties[propertyName];
_setTransitionEndProperty(String propertyName, String? prevValue, String value) {
if (value == prevValue) return;
_properties[propertyName] = value;
setRenderStyleProperty(propertyName, prevValue, value);
Expand Down Expand Up @@ -487,7 +499,7 @@ class CSSStyleDeclaration {
rootFontSize = renderBoxModel.elementDelegate.getRootElementFontSize();
fontSize = renderStyle.fontSize;
}

switch (propertyName) {
case WIDTH:
case HEIGHT:
Expand Down Expand Up @@ -556,6 +568,16 @@ class CSSStyleDeclaration {
if (!CSSTransform.isValidTransformValue(normalizedValue, viewportSize, rootFontSize, fontSize)) {
return;
}
// Transform should converted to matrix4 value to compare cause case such as
// `translate3d(750rpx, 0rpx, 0rpx)` and `translate3d(100vw, 0vw, 0vw)` should considered to be equal.
// Note this comparison cannot be done in style listener cause prevValue cannot be get in animation case.
if (prevValue != null) {
Matrix4? prevMatrix4 = CSSTransform.parseTransform(prevValue, viewportSize, rootFontSize, fontSize);
Matrix4? matrix4 = CSSTransform.parseTransform(normalizedValue, viewportSize, rootFontSize, fontSize);
if (prevMatrix4 == matrix4) {
return;
}
}
break;
}

Expand Down Expand Up @@ -611,7 +633,7 @@ class CSSStyleDeclaration {
setRenderStyleProperty(key, null, normalizedValue);
});
}

/// Set all style properties with em unit.
void setEmProperties() {
_properties.forEach((key, value) {
Expand All @@ -621,7 +643,7 @@ class CSSStyleDeclaration {
}
});
}

/// Set all style properties with rem unit.
void setRemProperties() {
_properties.forEach((key, value) {
Expand Down