uni-app圆形菜单展开收缩特效

朴灿烈づ我的快乐病毒、 2022-11-21 09:53 375阅读 0赞

template:

css:

.menu{
    		position: fixed;
    		width: 110rpx;
    		height: 110rpx;
    		bottom: 120rpx;
    		right: 44rpx;
    		border-radius: 50%;
    	}
    	.menuTrigger{
    	    position: absolute;
    	    top: 0;
    	    left: 0;
    	    width: 70rpx;
    	    height: 70rpx;
    	    background-color: green;
    	    border-radius: 50%;
    	    padding: 20rpx;
    	    cursor: pointer;
    	    transition: .35s ease;
    	}
    	.menuItem{
    	    position: absolute;
    	    width: 50rpx;
    	    height: 50rpx;
    		top: 10rpx;
    		left: 10rpx;
    	    padding: 20rpx;
    	    border-radius: 50%;
    	   background-color: white;
    	    border: none;
    	    box-shadow: 0 0 5rpx 1rpx rgba(0,0,0,.05);
    	    z-index: -1000;
    	    opacity: 0;
    	}
    	.menuItem1{
    		transition: .35s ease;
    	}
    	.menuItem2{
    		transition: .35s ease .1s;
    	}
    	.menuItem3{
    		transition: .35s ease .2s;
    	}
    	.menu.active .menuTrigger{
    		transform: rotateZ(225deg);
    		background-color: pink;
    	}
    	.menu.active .menuItem1{
    		top: -106rpx;
    		left: -120rpx;
    		opacity: 1;
    	}
    	.menu.active .menuItem2{
    		top: 10rpx;
    		left: -164rpx;
    		opacity: 1;
    	}
    	.menu.active .menuItem3{
    		top: 126rpx;
    		left: -120rpx;
    		opacity: 1;
    	}

js:

clickMenu(){
    	this.menuFlag = !this.menuFlag;
    },