trigger

components/_util/Dom/class-util.js

@@ -0,0 +1,61 @@
+/* @flow */
+
+/**
+ * Add class with compatibility for SVG since classList is not supported on
+ * SVG elements in IE
+ */
+export function addClass (el, cls) {
+  /* istanbul ignore if */
+  if (!cls || !(cls = cls.trim())) {
+    return
+  }
+
+  /* istanbul ignore else */
+  if (el.classList) {
+    if (cls.indexOf(' ') > -1) {
+      cls.split(/\s+/).forEach(c => el.classList.add(c))
+    } else {
+      el.classList.add(cls)
+    }
+  } else {
+    const cur = ` ${el.getAttribute('class') || ''} `
+    if (cur.indexOf(' ' + cls + ' ') < 0) {
+      el.setAttribute('class', (cur + cls).trim())
+    }
+  }
+}
+
+/**
+ * Remove class with compatibility for SVG since classList is not supported on
+ * SVG elements in IE
+ */
+export function removeClass (el, cls) {
+  /* istanbul ignore if */
+  if (!cls || !(cls = cls.trim())) {
+    return
+  }
+
+  /* istanbul ignore else */
+  if (el.classList) {
+    if (cls.indexOf(' ') > -1) {
+      cls.split(/\s+/).forEach(c => el.classList.remove(c))
+    } else {
+      el.classList.remove(cls)
+    }
+    if (!el.classList.length) {
+      el.removeAttribute('class')
+    }
+  } else {
+    let cur = ` ${el.getAttribute('class') || ''} `
+    const tar = ' ' + cls + ' '
+    while (cur.indexOf(tar) >= 0) {
+      cur = cur.replace(tar, ' ')
+    }
+    cur = cur.trim()
+    if (cur) {
+      el.setAttribute('class', cur)
+    } else {
+      el.removeAttribute('class')
+    }
+  }
+}

components/style/themes/default.less

@@ -209,7 +209,7 @@
 
 // Animation
 @animation-duration-slow: .3s; // Modal
-@animation-duration-base: 20s;
+@animation-duration-base: .2s;
 @animation-duration-fast: .1s; // Tooltip
 
 // Form

components/trigger/LazyRenderBox.vue

@@ -9,7 +9,7 @@ export default {
   render () {
     const { hiddenClassName, visible } = this.$props
 
-    if (hiddenClassName || this.$slots.default.length > 1) {
+    if (hiddenClassName || !this.$slots.default || this.$slots.default.length > 1) {
       let cls = ''
       if (!visible && hiddenClassName) {
         cls += ` ${hiddenClassName}`

components/trigger/Popup.vue

@@ -20,15 +20,18 @@ export default {
     mask: PropTypes.bool,
     zIndex: PropTypes.number,
   },
+  data () {
+    return {
+      destroyPopup: false,
+    }
+  },
   mounted () {
     this.rootNode = this.getPopupDomNode()
     this._container = this.getContainer()
-    // this._container.appendChild(this.$el)
+    this._container.appendChild(this.$el)
-    // this.$refs.alignInstance.forceAlign()
+    this.$nextTick(() => {
-  },
+      this.$refs.alignInstance.forceAlign()
-  beforeDestroy () {
+    })
-    this._container && this._container.parentNode.removeChild(this._container)
-    this._container = null
   },
   methods: {
     onAlign (popupDomNode, align) {
@@ -67,7 +70,7 @@ export default {
       if (!transitionName && props.animation) {
         transitionName = `${props.prefixCls}-${props.animation}`
       }
-      return 'fade'
+      return 'rc-trigger-popup-zoom'
     },
 
     getClassName (currentAlignClassName) {
@@ -79,12 +82,20 @@ export default {
     onMouseLeave (e) {
       this.$emit('mouseleave', e)
     },
+    beforeEnter (el) {
+      this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
+    },
+    afterLeave (el) {
+      if (this.destroyPopupOnHide) {
+        this.destroyPopup = true
+      }
+    },
     getPopupElement () {
       const { $props: props, onMouseEnter, onMouseLeave, $slots } = this
-      const { align, visible, prefixCls, destroyPopupOnHide } = props
+      const { align, visible, prefixCls } = props
       const className = this.getClassName(this.currentAlignClassName ||
       props.getClassNameFromAlign(align))
-      const hiddenClassName = `${prefixCls}-hidden`
+      // const hiddenClassName = `${prefixCls}-hidden`
       if (!visible) {
         this.currentAlignClassName = null
       }
@@ -102,30 +113,11 @@ export default {
         ref: 'popupInstance',
         style: { ...this.getZIndexStyle() },
       }
-
-      if (destroyPopupOnHide) {
-        return (<transition
-          name={this.getTransitionName()}
-        >
-          {visible ? (<Align
-            target={this.getTarget}
-            key='popup'
-            ref='alignInstance'
-            monitorWindowResize
-            align={align}
-            onAlign={this.onAlign}
-          >
-            <PopupInner
-              {...popupInnerProps}
-            >
-              {$slots.default}
-            </PopupInner>
-          </Align>) : null}
-        </transition>)
-      }
-      popupInnerProps.props.hiddenClassName = 'hiddenClassName'
       return (<transition
+        appear
         name={this.getTransitionName()}
+        onBeforeEnter={this.beforeEnter}
+        onAfterLeave={this.afterLeave}
       >
         <Align
           v-show={visible}
@@ -143,6 +135,7 @@ export default {
             {$slots.default}
           </PopupInner>
         </Align>
+
       </transition>)
     },
 
@@ -159,19 +152,20 @@ export default {
       const props = this.$props
       let maskElement
       if (props.mask) {
-        const maskTransition = this.getMaskTransitionName()
+        const maskTransition = this.getMaskTransitionName() || 'fade'
         maskElement = (
           <LazyRenderBox
+            v-show={props.visible}
             style={this.getZIndexStyle()}
             key='mask'
             class={`${props.prefixCls}-mask`}
-            hiddenClassName={`${props.prefixCls}-mask-hidden`}
             visible={props.visible}
           />
         )
         if (maskTransition) {
           maskElement = (
             <transition
+              appear
               name={maskTransition}
             >
               {maskElement}
@@ -184,23 +178,14 @@ export default {
   },
 
   render () {
+    const { destroyPopup, getMaskElement, getPopupElement } = this
     return (
-      <div>
+      <div style='position: absolute; top: 0px; left: 0px; width: 100%;'>
-        {this.getMaskElement()}
+        {getMaskElement()}
-        {this.getPopupElement()}
+        {destroyPopup ? null : getPopupElement()}
-        <transition name='fade'>
-          <div v-show={this.visible}>hello</div>
-        </transition>
       </div>
     )
   },
-  // render () {
-  //   return (
-  //     <transition name='fade'>
-  //       <div v-show={this.visible}>hello</div>
-  //     </transition>
-  //   )
-  // },
 }
 
 </script>

components/trigger/PopupInner.vue

@@ -17,15 +17,10 @@ export default {
     },
   },
   render () {
-    const { prefixCls, visible, hiddenClassName } = this.$props
+    const { prefixCls, visible } = this.$props
     const { onMouseEnter, onMouseLeave } = this
-    let className = ''
-    if (!visible) {
-      className += ` ${hiddenClassName}`
-    }
     return (
       <div
-        class={className}
         onMouseenter={onMouseEnter}
         onMouseleave={onMouseLeave}
       >

components/trigger/assets/index.less

@@ -1,10 +1,4 @@
 @triggerPrefixCls: rc-trigger-popup;
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 0.5s;
-}
-.fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
-  opacity: 0;
-}
 .@{triggerPrefixCls} {
   position: absolute;
   left: -9999px;
@@ -28,17 +22,18 @@
   }
 
   &-zoom-leave {
-    .effect();
     animation-timing-function: cubic-bezier(0.6, -0.3, 0.74, 0.05);
     animation-play-state: paused;
   }
 
-  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+  &-zoom-enter-active, &-zoom-appear-active {
+    .effect();
     animation-name: rcTriggerZoomIn;
     animation-play-state: running;
   }
 
-  &-zoom-leave&-zoom-leave-active {
+  &-zoom-leave-active {
+    .effect();
     animation-name: rcTriggerZoomOut;
     animation-play-state: running;
   }
@@ -46,6 +41,9 @@
   @keyframes rcTriggerZoomIn {
     0% {
       opacity: 0;
+    }
+    1% {
+      opacity: 0;
       transform-origin: 50% 50%;
       transform: scale(0, 0);
     }
@@ -55,6 +53,7 @@
       transform: scale(1, 1);
     }
   }
+
   @keyframes rcTriggerZoomOut {
     0% {
       opacity: 1;
@@ -68,5 +67,4 @@
     }
   }
 }
-
 @import "./mask";

components/trigger/index.vue

@@ -336,17 +336,17 @@ export default {
 
     getContainer () {
       const { $props: props } = this
-      const popupContainer = document.createElement('div')
+      // const popupContainer = document.createElement('div')
-      // Make sure default popup container will never cause scrollbar appearing
+      // // Make sure default popup container will never cause scrollbar appearing
-      // https://github.com/react-component/trigger/issues/41
+      // // https://github.com/react-component/trigger/issues/41
-      popupContainer.style.position = 'absolute'
+      // popupContainer.style.position = 'absolute'
-      popupContainer.style.top = '0'
+      // popupContainer.style.top = '0'
-      popupContainer.style.left = '0'
+      // popupContainer.style.left = '0'
-      popupContainer.style.width = '100%'
+      // popupContainer.style.width = '100%'
       const mountNode = props.getPopupContainer
         ? props.getPopupContainer(this.$el) : props.getDocument().body
-      mountNode.appendChild(popupContainer)
+      // mountNode.appendChild(popupContainer)
-      return popupContainer
+      return mountNode
     },
 
     setPopupVisible (sPopupVisible) {