feat(gradient-text): background-image transition

src/gradient-text/src/GradientText.vue

@@ -24,6 +24,8 @@ import {
 import { formatLength } from '../../_utils'
 import styles from './styles/index'
 
+let houdiniRegistered = false
+
 export default {
   name: 'GradientText',
   mixins: [
@@ -75,6 +77,25 @@ export default {
       }
       return undefined
     }
+  },
+  beforeMount () {
+    if (!houdiniRegistered) {
+      houdiniRegistered = true
+      if (window.CSS) {
+        CSS.registerProperty({
+          name: '--start-stop',
+          syntax: '<color>',
+          inherits: false,
+          initialValue: 'transparent'
+        })
+        CSS.registerProperty({
+          name: '--end-stop',
+          syntax: '<color>',
+          inherits: false,
+          initialValue: 'transparent'
+        })
+      }
+    }
   }
 }
 </script>

src/gradient-text/src/styles/themed-base.cssr.js

@@ -3,13 +3,22 @@ import { c, cTB, cM } from '../../../_utils/cssr'
 export default c([
   ({ props }) => {
     const {
-      backgroundImagePrimary,
+      rotate,
-      backgroundImageInfo,
+      colorStartPrimary,
-      backgroundImageSuccess,
+      colorEndPrimary,
-      backgroundImageWarning,
+      colorStartInfo,
-      backgroundImageError,
+      colorEndInfo,
+      colorStartWarning,
+      colorEndWarning,
+      colorStartError,
+      colorEndError,
+      colorStartSuccess,
+      colorEndSuccess,
       fontWeight
     } = props.$local
+    const {
+      cubicBezierEaseInOut
+    } = props.$base
     return cTB('gradient-text', {
       raw: `
         display: inline-block;
@@ -19,32 +28,41 @@ export default c([
         background-clip: text;
         color: transparent;
         white-space: nowrap;
+        background-image: linear-gradient(${rotate}, var(--start-stop) 0%, var(--end-stop) 100%);
+        transition:
+          --start-stop .3s ${cubicBezierEaseInOut},
+          --end-stop .3s ${cubicBezierEaseInOut};
       `
     },
     [
       cM('default-type', {
         raw: `
-          background-image: ${backgroundImagePrimary};
+          --start-stop: ${colorStartPrimary};
+          --end-stop: ${colorEndPrimary};
         `
       }),
       cM('success-type', {
         raw: `
-          background-image: ${backgroundImageSuccess};
+          --start-stop: ${colorStartSuccess};
+          --end-stop: ${colorEndSuccess};
         `
       }),
       cM('warning-type', {
         raw: `
-          background-image: ${backgroundImageWarning};
+          --start-stop: ${colorStartWarning};
+          --end-stop: ${colorEndWarning};
         `
       }),
       cM('error-type', {
         raw: `
-          background-image: ${backgroundImageError};
+          --start-stop: ${colorStartError};
+          --end-stop: ${colorEndError};
         `
       }),
       cM('info-type', {
         raw: `
-          background-image: ${backgroundImageInfo};
+          --start-stop: ${colorStartInfo};
+          --end-stop: ${colorEndInfo};
         `
       })
     ])

src/gradient-text/styles/dark.js

@@ -18,11 +18,17 @@ export default create({
     } = derived
     return {
       fontWeight: base.fontWeightStrong,
-      backgroundImagePrimary: `linear-gradient(252deg, ${primaryColor} 0%, ${primaryColorSuppl} 100%)`,
+      rotate: '252deg',
-      backgroundImageSuccess: `linear-gradient(252deg, ${successColor} 0%, ${successColorSuppl} 100%)`,
+      colorStartPrimary: primaryColor,
-      backgroundImageWarning: ` linear-gradient(252deg, ${warningColor} 0%, ${warningColorSuppl} 100%)`,
+      colorEndPrimary: primaryColorSuppl,
-      backgroundImageError: `linear-gradient(252deg, ${errorColor} 0%, ${errorColorSuppl} 100%)`,
+      colorStartInfo: infoColor,
-      backgroundImageInfo: `linear-gradient(252deg, ${infoColor} 0%, ${infoColorSuppl} 100%)`
+      colorEndInfo: infoColorSuppl,
+      colorStartWarning: warningColor,
+      colorEndWarning: warningColorSuppl,
+      colorStartError: errorColor,
+      colorEndError: errorColorSuppl,
+      colorStartSuccess: successColor,
+      colorEndSuccess: successColorSuppl
     }
   }
 })

src/gradient-text/styles/light.js

@@ -14,11 +14,17 @@ export default create({
     } = derived
     return {
       fontWeight: base.fontWeightStrong,
-      backgroundImagePrimary: `linear-gradient(252deg, ${changeColor(primaryColor, { alpha: 0.6 })} 0%, ${primaryColor} 100%)`,
+      rotate: '252deg',
-      backgroundImageSuccess: `linear-gradient(252deg, ${changeColor(successColor, { alpha: 0.6 })} 0%, ${successColor} 100%)`,
+      colorStartPrimary: changeColor(primaryColor, { alpha: 0.6 }),
-      backgroundImageWarning: ` linear-gradient(252deg, ${changeColor(warningColor, { alpha: 0.6 })} 0%, ${warningColor} 100%)`,
+      colorEndPrimary: primaryColor,
-      backgroundImageError: `linear-gradient(252deg, ${changeColor(errorColor, { alpha: 0.6 })} 0%, ${errorColor} 100%)`,
+      colorStartInfo: changeColor(infoColor, { alpha: 0.6 }),
-      backgroundImageInfo: `linear-gradient(252deg, ${changeColor(infoColor, { alpha: 0.6 })} 0%, ${infoColor} 100%)`
+      colorEndInfo: infoColor,
+      colorStartWarning: changeColor(warningColor, { alpha: 0.6 }),
+      colorEndWarning: warningColor,
+      colorStartError: changeColor(errorColor, { alpha: 0.6 }),
+      colorEndError: errorColor,
+      colorStartSuccess: changeColor(successColor, { alpha: 0.6 }),
+      colorEndSuccess: successColor
     }
   }
 })