animation

src/components/consultant/index.js

@@ -12,38 +12,43 @@ export default class Index extends Component {
         style: {}
     }
     handleClick() {
-        this.setState({
-            show: false
-        })
+        setTimeout(() => {
+            this.setState({
+                show: false
+            })
+        }, 260)
     }
     handleClickTwo() {
-        this.setState({
-            show: true
-        })
+        setTimeout(() => {
+            this.setState({
+                show: true
+            })
+        }, 260)
+
     }
     render() {
         const { show } = this.state
         return (
             <View>
-                {show &&
-                    <View className="consultant" style={this.props.style} onClick={this.handleClick}  >
-                        <Image src={require('@assets/person/left.png')}  className='left-img'></Image>
-                        <Image src="http://pic3.zhimg.com/50/v2-55f854baa56381deff541029d51662d0_hd.jpg" className='img'></Image>
-                        <View className="text">哈哈哈</View>
-                    </View>
-                }
-                {!show &&
-                    <View className="consultant-more" style={this.props.style} >
-                         <Image src={require('@assets/person/cancel.png')}  onClick={this.handleClickTwo}className='cancel-img'></Image>
-                        <Image src="http://pic3.zhimg.com/50/v2-55f854baa56381deff541029d51662d0_hd.jpg" className='touxiang'></Image>
-                        <View className="text">
-                            <View className="name">哈哈哈</View>
-                            <View className="company">南京橙蕉互动数字科技有限公司</View>
-                        </View>
-                        <Image src={require('@assets/person/phone.png')} className='phone-img'></Image>
-                        <Image src={require('@assets/person/message.png')} className='message-img'></Image>
+                {/* {show && */}
+                <View className={show ? "consultant show" : "consultant hide"} style={this.props.style} onClick={this.handleClick}  >
+                    <Image src={require('@assets/person/left.png')} className='left-img'></Image>
+                    <Image src="http://pic3.zhimg.com/50/v2-55f854baa56381deff541029d51662d0_hd.jpg" className='img'></Image>
+                    <View className="text">哈哈哈</View>
+                </View>
+                {/* } */}
+                {/* {!show && */}
+                <View className={show ? "consultant-more hide " : "consultant-more more-show "} style={this.props.style} >
+                    <Image src={require('@assets/person/cancel.png')} onClick={this.handleClickTwo} className='cancel-img'></Image>
+                    <Image src="http://pic3.zhimg.com/50/v2-55f854baa56381deff541029d51662d0_hd.jpg" className='touxiang'></Image>
+                    <View className="text">
+                        <View className="name">哈哈哈</View>
+                        <View className="company">南京橙蕉互动数字科技有限公司</View>
                     </View>
-                }
+                    <Image src={require('@assets/person/phone.png')} className='phone-img'></Image>
+                    <Image src={require('@assets/person/message.png')} className='message-img'></Image>
+                </View>
+                {/* } */}
 
                 <View>
                 </View>

src/components/consultant/index.scss

@@ -1,7 +1,7 @@
 @import "@styles/theme.scss";
 .consultant {
   position: fixed;
-  bottom: 140px;
+  bottom: 169px;
   right: 0;
   height: 84px;
   background-color: #fff;
@@ -10,12 +10,12 @@
   z-index: 99;
   display: flex;
   align-items: center;
-  padding: 0 10px;
+ 
   transition: all 1s;
   .left-img{
       width: 18px;
       height: 34px;
-      margin-right: 12px;
+      margin: 0 12px;
   }
   .img{
     width: 48px;
@@ -26,13 +26,28 @@
   .text {
     color: $primary-color;
     font-size: 32px;
-    margin: 0 10px;
+    margin: 0 20px 0 10px;
   }
 
 }
-.consultant-more{
+    .show{
+    opacity: 1;
+    width: auto;
+    transition: 0.3s all ease-in;
+    }
+    .hide{
+    width: 0;
+    opacity: 0;
+    transition: 0.3s all ease-in;
+    }
+    .more-show{
     width:706px;
-    height:142px;
+    opacity: 1;
+    transition: 0.3s all ease-in;
+    }
+
+.consultant-more{
+    height:140px;
     background:rgba(0,0,0,0.5);
     border-radius:146px 0px 0px 146px;
     position: fixed;
@@ -40,11 +55,11 @@
     right: 0;
     display: flex;
     align-items: center;
-    padding: 0 16px;
+   
     .cancel-img{
         width: 36px;
         height: 36px;
-        margin-right: 16px;
+        margin: 0 16px;
       }
     .touxiang{
         width: 86px;
@@ -75,6 +90,6 @@
     .message-img{
         width:42px;
         height:42px;
-        margin-left: 30px;
+        margin: 0 30px;
     }
 }

src/pages/news/detail/index.js

@@ -246,7 +246,7 @@ export default class NewsDetail extends Component {
               </ScrollView>
               
               <Notice></Notice>
-              <BackHomeBtn ></BackHomeBtn>
+              <BackHomeBtn style="bottom:160px" ></BackHomeBtn>
               {/* <Consultant></Consultant> */}
 
               <View className="bot-nav flex">