feat(component): 支持webkit前缀

Yoshino-UI · Sep 19, 2018 · e01a30f · e01a30f
1 parent b9ec8d9
commit e01a30f
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/components/Collapse/style/index.less b/components/Collapse/style/index.less
@@ -48,7 +48,7 @@
 
   &-active {
     .@{panel-prefix-cls}-icon {
-      transform: rotate(90deg);
+      transform: rotate(90deg) translate(-50%);
     }
   }
 

diff --git a/components/Transitions/Expand.tsx b/components/Transitions/Expand.tsx
@@ -76,10 +76,14 @@ export class Expand extends Component<IExpandProps, IExpandState> {
       >
         {
           () => {
+            const transition = `height ${timeout! / 1000}s cubic-bezier(0.645, 0.045, 0.355, 1)`;
             return (
               <div
                 className={preCls}
-                style={{transition: `height ${timeout! / 1000}s cubic-bezier(.645,.045,.355,1)`}}
+                style={{
+                  transition,
+                  WebkitTransition: transition,
+                }}
                 ref={(v: HTMLElement | null) => {
                   if (v) {
                     this.refContainer = v;

diff --git a/components/Transitions/Scale.tsx b/components/Transitions/Scale.tsx
@@ -80,10 +80,12 @@ export class Scale extends Component<IScaleProps, IScaleState> {
         {
           () => {
             const child = React.Children.only(children);
+            const transition =  `all ${timeout! / 1000}s cubic-bezier(.645,.045,.355,1)`;
             return React.cloneElement(child, {
               style: {
                 ...child.props.style,
-                transition: `all ${timeout! / 1000}s cubic-bezier(.645,.045,.355,1)`,
+                transition,
+                WebkitTransition: transition,
               },
               ref: (v: HTMLElement) => {
                 if (v) {

diff --git a/components/Transitions/Slide.tsx b/components/Transitions/Slide.tsx
@@ -135,10 +135,12 @@ export class Slide extends Component<ISlideProps, ISlideState> {
         {
           () => {
             const child = React.Children.only(children);
+            const transition = `all ${timeout! / 1000}s cubic-bezier(.645,.045,.355,1)`;
             return React.cloneElement(child, {
               style: {
                 ...child.props.style,
-                transition: `all ${timeout! / 1000}s cubic-bezier(.645,.045,.355,1)`,
+                transition,
+                WebkitTransition: transition,
               },
               ref: (v: HTMLElement) => {
                 if (v) {