示例：

子组件 handle_button.jsx

import Taro, { PureComponent } from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import "./handle.styl";
type PAGE_STATE = {
  btn_class: any;
  btn_status: boolean;
  btn_options_class: any;
};
interface MYPROPS {
  onTrigger: (index) => any;
}
export default class HandleButton extends PureComponent<MYPROPS, PAGE_STATE> {
  constructor(props) {
    super(props);
    this.state = {
      btn_class: "handle-button-image",
      btn_options_class: "handle-button-options",
      btn_status: false
    };
  }
  buttonClick = () => {
    this.setState(
      {
        btn_status: !this.state.btn_status
      },
      () => {
        this.setState({
          btn_class: this.state.btn_status
            ? "handle-button-image-open"
            : "handle-button-image",
          btn_options_class: this.state.btn_status
            ? "handle-button-options-active"
            : "handle-button-options"
        });
      }
    );
  };
  optionsClick = (index: any) => {
    this.props.onTrigger(index);
  };
  render() {
    const button = (
      // 主按钮
      <View style="width:100%;height:100%">
        <View className="handle-button-main">
          <Image
            onClick={this.buttonClick}
            className={this.state.btn_class}
            src={require("@images/shuoshuo/main-btn.png")}
          ></Image>
        </View>


        {/* 子按钮 */}
        <View className={this.state.btn_options_class}>
          <Image
            onClick={this.optionsClick.bind(this, 0)}
            src={require("@images/shuoshuo/shuoshuo_btn_write@2x.png")}
          ></Image>
          <Image
            onClick={this.optionsClick.bind(this, 1)}
            src={require("@images/shuoshuo/shuoshuo_btn_refresh@2x.png")}
          ></Image>
          <Image
            onClick={this.optionsClick.bind(this, 2)}
            src={require("@images/shuoshuo/shuoshuo_btn_top@2x.png")}
          ></Image>
        </View>
      </View>
    );


    return <View className="handle-button">{button}</View>;
  }
}

子组件 handle_button.style

.handle-button
    position: fixed
    bottom: 60px
    right 40px
    width: 112px
    height 112px
    z-index 200
.handle-button-main
    position: absolute
    width: 100%
    height 100%
    z-index: 201


.handle-button-image
    position: absolute
    width: 90%
    height 90%
    transition: all 0.5s;
    transform:rotate(deg);
   
.handle-button-image-open
    width: 90%
    height 90%
    transition: all 0.5s;
    transform:rotate(-135deg);
.handle-button-options
    position: absolute
    width: 90%
    height 90%
    opacity 
    transition: all 0.5s;
.handle-button-options Image:nth-child(0)
    position: absolute
    top10%;
    left:12%
    width: 85%
    height 85%
    transition: all 0.3s;
.handle-button-options Image:nth-child(1)
    position: absolute
    top10%;
    left:12%
    width: 85%
    height 85%
    transition: all 0.4s;


.handle-button-options Image:nth-child(2)
    position: absolute
    top10%;
    left:12%
    width: 85%
    height 85%
    transition: all 0.5s;


.handle-button-options-active
    position: absolute
    width: 90%
    height 90%
    opacity 
    transition: all 0.5s;


.handle-button-options-active Image:nth-child(0)
    position: absolute
    top20%;
    left:-110%
    width: 85%
    height 85%
    transition: all 0.3s;
.handle-button-options-active Image:nth-child(1)
    position: absolute
    top-65%;
    left:-65%
    width: 85%
    height 85%
    transition: all 0.4s;


.handle-button-options-active Image:nth-child(2)
    position: absolute
    top-110%;
    left:20%
    width: 85%
    height 85%
    transition: all 0.5s;

父组件引用