diff --git a/packages/motion/src/components/motion/props.ts b/packages/motion/src/components/motion/props.ts index 41ffba7..2b07688 100644 --- a/packages/motion/src/components/motion/props.ts +++ b/packages/motion/src/components/motion/props.ts @@ -86,6 +86,4 @@ export const MotionComponentProps = { 'onPanStart': { type: Function }, 'onPan': { type: Function }, 'onPanEnd': { type: Function }, - 'onFocus': { type: Function }, - 'onBlur': { type: Function }, } diff --git a/packages/motion/src/components/motion/use-motion-state.ts b/packages/motion/src/components/motion/use-motion-state.ts index 771546c..b31be9f 100644 --- a/packages/motion/src/components/motion/use-motion-state.ts +++ b/packages/motion/src/components/motion/use-motion-state.ts @@ -115,7 +115,9 @@ export function useMotionState(props: MotionProps) { }) } - attrsProps.style = createStyles(styleProps) + const style = createStyles(styleProps) + if (style) + attrsProps.style = style return attrsProps } diff --git a/packages/motion/src/components/motion/utils.ts b/packages/motion/src/components/motion/utils.ts index e46dcd2..6c45e4e 100644 --- a/packages/motion/src/components/motion/utils.ts +++ b/packages/motion/src/components/motion/utils.ts @@ -121,8 +121,10 @@ export function createMotionComponent( const isComponent = typeof props.as === 'object' if ((!isComponent || props.asChild) && el) { const { style } = getAttrs() - for (const [key, val] of Object.entries(style)) { - (el).style[key] = val + if (style) { + for (const [key, val] of Object.entries(style)) { + (el).style[key] = val + } } } } diff --git a/packages/motion/src/state/style.ts b/packages/motion/src/state/style.ts index 515758b..53c7f6f 100644 --- a/packages/motion/src/state/style.ts +++ b/packages/motion/src/state/style.ts @@ -66,6 +66,9 @@ export function createStyles(keyframes?: MotionStyle | DOMKeyframesDefinition): if (transforms.length) { initialKeyframes.transform = buildTransformTemplate(transforms) } + if (Object.keys(initialKeyframes).length === 0) { + return null + } return initialKeyframes }