Merge pull request #909 from tangly1024/fix/animation

Fix/animation

components/Collapse.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useImperativeHandle } from 'react'
 
 /**
  * 折叠面板组件，支持水平折叠、垂直折叠
@@ -6,12 +6,27 @@ import React from 'react'
  * @returns
  */
 const Collapse = props => {
-  const collapseRef = React.useRef(null)
+  const { collapseRef } = props
+  const ref = React.useRef(null)
   const type = props.type || 'vertical'
+
+  useImperativeHandle(collapseRef, () => {
+    return {
+      /**
+       * 当子元素高度变化时，可调用此方法更新折叠组件的高度
+       * @param {*} param0
+       */
+      updateCollapseHeight: ({ height, increase }) => {
+        ref.current.style.height = ref.current.scrollHeight
+        ref.current.style.height = 'auto'
+      }
+    }
+  })
+
   /**
-   * 折叠
-   * @param {*} element
-   */
+     * 折叠
+     * @param {*} element
+     */
   const collapseSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -34,9 +49,9 @@ const Collapse = props => {
   }
 
   /**
-   * 展开
-   * @param {*} element
-   */
+     * 展开
+     * @param {*} element
+     */
   const expandSection = element => {
     const sectionHeight = element.scrollHeight
     const sectionWidth = element.scrollWidth
@@ -58,22 +73,20 @@ const Collapse = props => {
     clearTimeout(clearTime)
   }
 
-  const updateHeight = () => {
-    collapseRef.current.style.height = 'auto'
-  }
-
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.isOpen) {
-      expandSection(collapseRef.current)
+      expandSection(ref.current)
     } else {
-      collapseSection(collapseRef.current)
+      collapseSection(ref.current)
     }
+    // 通知父组件高度变化
+    props?.onHeightChange && props.onHeightChange({ height: ref.current.scrollHeight, increase: props.isOpen })
   }, [props.isOpen])
 
   return (
-    <div ref={collapseRef} onClick={updateHeight} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
-      {props.children}
-    </div>
+        <div ref={ref} style={type === 'vertical' ? { height: '0px' } : { width: '0px' }} className={'overflow-hidden duration-200 ' + props.className}>
+            {props.children}
+        </div>
   )
 }
 Collapse.defaultProps = { isOpen: false }

components/FlutteringRibbon.js

@@ -1,10 +1,21 @@
 /* eslint-disable */
 import React from 'react'
-
+const  id = 'canvasFlutteringRibbon'
 export const FlutteringRibbon = () => {
+     const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
   React.useEffect(() => {
     createFlutteringRibbon()
+        return () => destroyRibbon()
+
   }, [])
+    return <></>
+
 }
 
 /**
@@ -125,6 +136,7 @@ function createFlutteringRibbon() {
           init: function () {
             try {
               ;(this._canvas = document.createElement('canvas')),
+                (this._canvas.id = id),
                 (this._canvas.style.display = 'block'),
                 (this._canvas.style.position = 'fixed'),
                 (this._canvas.style.margin = '0'),

components/Nest.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvasNestCreated'
 export const Nest = () => {
-  React.useEffect(() => {
+  const destroyNest = ()=>{
+      const nest = document.getElementById(id)
+      if(nest && nest.parentNode){
+        nest.parentNode.removeChild(nest)
+      }
+  }
+
+  useEffect(() => {
     createNest()
+    return () => destroyNest()
   }, [])
+  return <></>
 }
 
 /**
@@ -65,7 +74,7 @@ function createNest() {
       m(o)
   }
   var i = document.createElement('canvas')
-  i.id = 'canvasNestCreated'
+  i.id = id
   var a = (function () {
       const t = e
       return {

components/Ribbon.js

@@ -1,10 +1,20 @@
 /* eslint-disable */
-import React from 'react'
+import { useEffect } from 'react'
+const id = 'canvasRibbon'
 
 export const Ribbon = () => {
-  React.useEffect(() => {
+ const destroyRibbon = ()=>{
+    const ribbon = document.getElementById(id)
+      if(ribbon && ribbon.parentNode){
+        ribbon.parentNode.removeChild(ribbon)
+      }
+  }
+  
+  useEffect(() => {
     createRibbon()
+    return () => destroyRibbon()
   }, [])
+  return <></>
 }
 
 /**
@@ -29,6 +39,7 @@ function createRibbon() {
       a = window.innerWidth,
       l = window.innerHeight,
       d = e.s
+    i.id= id
     let r, s
     const u = Math
     let h = 0

components/Sakura.js

@@ -1,10 +1,19 @@
 /* eslint-disable */
-import React from 'react'
-
+import { useEffect } from 'react'
+const id = 'canvas_sakura'
 export const Sakura = () => {
-  React.useEffect(() => {
+  const destroySakura = ()=>{
+    const sakura = document.getElementById(id)
+    if(sakura && sakura.parentNode){
+      sakura.parentNode.removeChild(sakura)
+    }
+  }
+      
+  useEffect(() => {
     createSakura({})
+    return () => destroySakura()
   }, [])
+  return <></>
 }
 
 /**
@@ -129,7 +138,7 @@ function createSakura() {
       'style',
       'position: fixed;left: 0;top: 0;pointer-events: none;'
     )
-    canvas.setAttribute('id', 'canvas_sakura')
+    canvas.setAttribute('id', id)
     document.getElementsByTagName('body')[0].appendChild(canvas)
     cxt = canvas.getContext('2d')
     var sakuraList = new SakuraList()
@@ -165,15 +174,12 @@ function createSakura() {
       stop = requestAnimationFrame(asd)
     }
   }
-  window.onresize = function () {
-    var canvasSnow = document.getElementById('canvas_snow')
-  }
   img.onload = function () {
     startSakura()
   }
   function stopp() {
     if (staticx) {
-      var child = document.getElementById('canvas_sakura')
+      var child = document.getElementById(id)
       child.parentNode.removeChild(child)
       window.cancelAnimationFrame(stop)
       staticx = false

components/SideBarDrawer.js

@@ -37,8 +37,8 @@ const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
     }
   }
 
-  return <div id='sidebar-wrapper' className={' block md:hidden ' + className }>
-    <div id='sidebar-drawer' className={`${isOpen ? 'ml-0 w-56' : '-ml-60 max-w-side'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
+  return <div id='sidebar-wrapper' className={' block md:hidden top-0 ' + className }>
+    <div id="sidebar-drawer" className={`${isOpen ? 'ml-0 w-56 visible' : '-ml-60 max-w-side invisible'} bg-white dark:bg-gray-900 shadow-black shadow-lg flex flex-col duration-300 fixed h-full left-0 overflow-y-scroll scroll-hidden top-0 z-30`}>
       {children}
     </div>
 

components/StarrySky.js

@@ -7,7 +7,7 @@ export const StarrySky = () => {
   }, [])
   return (
     <div className="relative">
-      <canvas id="starry-sky-vixcity" className="fixed pointer-events-none"></canvas>
+      <canvas id="starry-sky-vixcity" style={{zIndex:1}} className="top-0 fixed pointer-events-none"></canvas>
     </div>
   )
 }