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 <bm2736...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org