react旋转菜单,taro旋转菜单,旋转菜单

最新推荐文章于 2024-06-15 19:02:23 发布

及时行樂225

最新推荐文章于 2024-06-15 19:02:23 发布

阅读量405

点赞数 9

文章标签： react.js taro css

本文链接：https://blog.csdn.net/weixin_60623799/article/details/134733334

版权

 {/* 菜单 */}
          <View className="demo">
            <View className="container">
              <View className="row" style={{
                position: 'relative',
              }}
                onClick={(e) => {
                  e.stopPropagation()
                  setIsOpen(!isOpen);
                }}
              >
                <View className="menu-box" style={{

                  transform: isOpen ? 'rotate(0deg)' : 'rotate(-271deg)',
                  transition: 'all 0.6s ease'
                }} onClick={(e) => {
                  e.stopPropagation()
                  setIsOpen(!isOpen);
                }}>
                  <Image src='https://ripe-wheat-applet-img.westatement.cn/merchantInfo/icon-menu.png'></Image>
                </View>
                <View className={`menu-li ${isOpen ? '' : 'open'}`} style={{
                  opacity: isOpen ? '1' : '0',
                  transition: 'all 0.6s ease'
                }}>
                  <View className="Groupbuy" style={{
                    transform: isOpen ? 'rotate(90deg) translateX(-130px)'
                      : 'rotate(0deg) translateY(-47px)',
                    transition: 'all 0.6s ease'
                  }}>
                    <View style={{
                      transform: 'rotate(-90deg)'
                    }} onClick={() => {
                      if (isOpen) {
                        Taro.navigateTo({
                          
                        })
                      }
                    }}> 团购</View>
                  </View>
                  <View className="dynamic" style={{
                    transform: isOpen ? 'rotate(67deg) translateX(-146px)' : 'rotate(0deg) translateY(-95px)',
                    transition: 'all 0.6s ease'
                  }}>
                    <View onClick={() => {
                      if (isOpen) {
                        Taro.navigateTo({
                         
                        })
                      }

                    }} style={{
                      transform: 'rotate(-67deg)'
                    }}> 动态</View>
                  </View>
                  <View className="Activity" style={{
                    transform: isOpen ? 'rotate(57deg) translateX(-129px)' : 'rotate(0deg) translateY(-142px)',
                    transition: 'all 0.6s ease'
                  }}>
                    <View style={{
                      transform: 'rotate(-55deg)'
                    }}
                      onClick={() => {
                        if (isOpen) {
                          Taro.navigateTo({
                           
                          })
                        }

                      }}
                    > 活动</View>
                  </View>

                </View>
              </View>
            </View>
          </View>
        </View>

css代码

.demo {
  position: fixed;
  right: 24px;
  bottom: 3%;

  .menu-box {
    width: 88px;
    height: 88px;


    Image {
      width: 100%;
      height: 100%;
    }
  }

  .menu-li {


    .Groupbuy,
    .dynamic,
    .Activity {
      width: 84px;
      height: 84px;
      border-radius: 50%;
      font-size: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      line-height: 84px;




    }

    .Groupbuy {

      background-image: linear-gradient(to right, #31DD86, #15B956);

    }

    .dynamic {

      background-image: linear-gradient(to right, #FEC63F, #EDA218);
    }

    .Activity {

      background-image: linear-gradient(to right, #92C5FF, #2682EA);
    }

    .open {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
    }
  }
}