react 点击按钮 div隐藏显示 添加展开收起动画效果

标签：动画 style const headerDes height react div any 16rem

js代码　

---

　const [collapse, setCollapse] = useState(false)     const [showBack, setShowBack] = useState(false)     const changeCollapse = () => { 　　// 获取展开收起目标元素         const headerDes = document.querySelector('.phone_header_des');         if(!collapse){ 　　　　// 展开时 　　　　// 获取内部唯一children 高度来设置目标元素高度             const headerDesContent = document.querySelector(".phone_header_des_content");             const height = (headerDesContent as any).offsetHeight;             (headerDes as any).style.height = height + "px";             (headerDes as any).style.padding ='0 16rem 16rem'         }else{ 　　　　//收起时             (headerDes as any).style.height = 0;             (headerDes as any).style.padding ='0 16rem 0' ;         }         setCollapse(!collapse)
    } css 

---

.phone_header_des {   position: absolute;   top: 84rem;   left: 0rem;   background: #efefef;   border-radius: 0 0 16rem 16rem;   padding: 0 16rem 0rem;   overflow: hidden;   height: 0;   transition: all 1s ease-in-out } html 

 

标签：动画,style,const,headerDes,height,react,div,any,16rem
From： https://www.cnblogs.com/zscxy/p/18003301