uni-app 悬浮框动效

<view class="menu" :class="{active:menuFlag}">
		<image src="../../static/svg/1.svg" class="menuTrigger" @tap="clickMenu"></image>
		<image src="../../static/svg/2.svg" class="menuItem menuItem1"></image>
		<image src="../../static/svg/3.svg" class="menuItem menuItem2"></image>
		<image src="../../static/svg/4.svg" class="menuItem menuItem3"></image>
</view>

.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;
	}

data() {
         return {
				mask: false,
				menuFlag: false,
			}
		},

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

原文链接：https://zhuanlan.zhihu.com/p/364244176