You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/11/19 08:21:05 UTC
[echarts] branch graphic-animation updated: feat(transition): fix style transition all
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch graphic-animation
in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/graphic-animation by this push:
new 24a9984 feat(transition): fix style transition all
24a9984 is described below
commit 24a9984362c29b6ddc293f086238dc2330187abf
Author: pissang <bm...@gmail.com>
AuthorDate: Fri Nov 19 16:20:22 2021 +0800
feat(transition): fix style transition all
---
src/animation/customGraphicTransition.ts | 22 ++++++++++++++++------
src/component/graphic/GraphicView.ts | 4 ++--
test/graphic-transition.html | 11 +++++++++--
3 files changed, 27 insertions(+), 10 deletions(-)
diff --git a/src/animation/customGraphicTransition.ts b/src/animation/customGraphicTransition.ts
index 90d7dfa..7ad28be 100644
--- a/src/animation/customGraphicTransition.ts
+++ b/src/animation/customGraphicTransition.ts
@@ -158,6 +158,10 @@ export function applyLeaveTransition(
}
}
+export function isTransitionAll(transition: TransitionProps): transition is 'all' {
+ return transition === 'all';
+}
+
function applyPropsDirectly(
el: Element,
@@ -405,7 +409,7 @@ function prepareShapeOrExtraTransitionFrom(
const attrTransition = attrOpt.transition;
if (attrTransition) {
!transFromPropsInAttr && (transFromPropsInAttr = transFromProps[mainAttr] = {});
- if (attrTransition === 'all') {
+ if (isTransitionAll(attrTransition)) {
extend(transFromPropsInAttr, elPropsInAttr);
}
else {
@@ -417,7 +421,7 @@ function prepareShapeOrExtraTransitionFrom(
}
}
}
- else if (transition === 'all' || indexOf(transition, mainAttr) >= 0) {
+ else if (isTransitionAll(transition) || indexOf(transition, mainAttr) >= 0) {
!transFromPropsInAttr && (transFromPropsInAttr = transFromProps[mainAttr] = {});
const elPropsInAttrKeys = keys(elPropsInAttr);
for (let i = 0; i < elPropsInAttrKeys.length; i++) {
@@ -482,7 +486,7 @@ function prepareTransformTransitionFrom(
if (!isInit) {
const transition = elOption.transition;
- const transitionKeys = transition === 'all'
+ const transitionKeys = isTransitionAll(transition)
? TRANSFORM_PROPS
: normalizeToArray(transition || []);
for (let i = 0; i < transitionKeys.length; i++) {
@@ -562,8 +566,10 @@ function prepareStyleTransitionFrom(
}
if (!isInit && fromElStyle) {
- if (styleOpt.transition) {
- const transitionKeys = normalizeToArray(styleOpt.transition);
+ const styleTransition = styleOpt.transition;
+ const elTransition = elOption.transition;
+ if (styleTransition && !isTransitionAll(styleTransition)) {
+ const transitionKeys = normalizeToArray(styleTransition);
!transFromStyleProps && (transFromStyleProps = transFromProps.style = {});
for (let i = 0; i < transitionKeys.length; i++) {
const key = transitionKeys[i];
@@ -574,7 +580,11 @@ function prepareStyleTransitionFrom(
}
else if (
(fromEl as Displayable).getAnimationStyleProps
- && indexOf(elOption.transition, 'style') >= 0
+ && (
+ isTransitionAll(elTransition)
+ || isTransitionAll(styleTransition)
+ || indexOf(elTransition, 'style') >= 0
+ )
) {
const animationProps = (fromEl as Displayable).getAnimationStyleProps();
const animationStyleProps = animationProps ? animationProps.style : null;
diff --git a/src/component/graphic/GraphicView.ts b/src/component/graphic/GraphicView.ts
index 50dbbf0..9d90fe0 100644
--- a/src/component/graphic/GraphicView.ts
+++ b/src/component/graphic/GraphicView.ts
@@ -38,7 +38,7 @@ import {
GraphicComponentGroupOption,
GraphicComponentElementOption
} from './GraphicModel';
-import { applyLeaveTransition, applyUpdateTransition } from '../../animation/customGraphicTransition';
+import { applyLeaveTransition, applyUpdateTransition, isTransitionAll } from '../../animation/customGraphicTransition';
import { updateProps } from '../../animation/basicTrasition';
const nonShapeGraphicElements = {
@@ -303,7 +303,7 @@ export class GraphicComponentView extends ComponentView {
for (let k = 0; k < xy.length; k++) {
const key = xy[k];
const val = layoutPos[key];
- if (transition && (transition === 'all' || zrUtil.indexOf(transition, key) >= 0)) {
+ if (transition && (isTransitionAll(transition) || zrUtil.indexOf(transition, key) >= 0)) {
animatePos[key] = val;
}
else {
diff --git a/test/graphic-transition.html b/test/graphic-transition.html
index cb45354..8a1b0c3 100644
--- a/test/graphic-transition.html
+++ b/test/graphic-transition.html
@@ -159,7 +159,7 @@ under the License.
type: 'circle',
x: 100,
y: 50,
- transition: ['x', 'y'],
+ transition: 'all',
shape: {
cx: 0,
cy: 0,
@@ -184,7 +184,14 @@ under the License.
chart.setOption({
graphic: {
elements: [{
- x: 200
+ x: Math.random() * chart.getWidth(),
+ y: Math.random() * chart.getHeight(),
+ shape: {
+ r: Math.random() * 30 + 50
+ },
+ style: {
+ fill: echarts.color.random()
+ }
}]
}
})
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org