微信小程序 9宫格翻牌动画

9宫格翻牌需求：

1.进来时平铺9个格子显示

2.点击开始抽奖时洗牌动作

3.洗完牌后呈现9个都是未翻牌的状态

4.点击任意一个牌子，有翻转的动作

5.翻转结束后出现中奖的弹窗

555，当时真的一点一点调动画

敲黑板~

wxml：

 <view class="main_border">
                <view class="inside_border viewport-flip">
                    <block wx:for="{{position}}">
                        <view class="parent_border flip {{flipArr[index]?'out':'in'}}" style="left:{{item.x}};top:{{item.y}};" animation="{{objArr[index].animationData}}"
                            data-idx="{{index}}"  hover-class="opacity">
                            <form report-submit class="sec_border border_{{index}} gifts_back centerBtn" bindsubmit="{{isMember?'click':'openCard'}}"  style="display:block" wx:if="{{isClick && index ==4}}">
                                <button class="" form-type="submit" style="width:100%;height:100%;opacity:0"></button>
                            </form>
                            <view class="sec_border border_{{index}} gifts_back {{isClick?'centerBtn':''}}" bindtap="{{isClick?'':'btnFlip'}}"
                                data-index="{{index}}" wx:else>                                
                                
                            </view>                            
                        </view>                        
                    </block>
                </view>
            </view>

less: 动画基本上我是用添加class类样式控制的

.main_border{
  .inside_border{
    margin: 0 auto;
    width: 639rpx;
    height: 639rpx;
    position: relative;    
    .parent_border{
      position:absolute;
      height:203rpx;
      width: 203rpx;
    }
  }
}

.sec_border{
    width: 100%;
    height: 100%; 
  .gifts_img{
    display:none;
    width: 100%;
    height: 100%;
    
  }
}

.gift-animat{
    display: block;
}



// 翻牌动画
.viewport-flip {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
}
.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    backface-visibility: hidden;/*backface-visibility 属性定义当元素不面向屏幕时是否可见*/
    transform: translateX(0);
    position: fixed;
}
.flip.out {
    -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;
    transform: rotateY(-90deg) scale(.9);
    animation-name: flipouttoleft;
    animation-duration: 175ms;
}

.flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 225ms;
    animation-name: flipintoright;
    animation-duration: 225ms;
}

@keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg) scale(.9); }
}

.flip.outA {
    // -webkit-transform: rotateY(-90deg) scale(.9);
    // -webkit-animation-name: flipouttoleft;
    // -webkit-animation-duration: 175ms;
    transform: rotateY(0deg) scale(1);
    animation-name: flipouttoleftA;
    animation-duration: 1000ms; 
    top:0 !important;
    left: 0 !important;
    width: 640rpx !important;
    height: 700rpx !important;
    z-index: 999999;
}
@keyframes flipouttoleftA {
    0% { 
        transform: rotateY(0); 
    }
    50% {
       transform: rotateY(-90deg) scale(1);  
    }
    100% { 
        transform: rotateY(0deg) scale(1); 
        top:0;
        left: 0;
        width: 640rpx;
        height: 700rpx;
    }
}


@keyframes flipintoright {
    from { transform: rotateY(90deg) scale(.9); }
    to { transform: rotateY(0); }
}

当时9个牌子，我用js创建数组存储x/y和按钮是否点击(动了点小脑袋)

const widthFa = 639;
const heightFa = 639;
const widthChil = 203;
const heightChil = 203;

position: [
      { x: '0rpx', y: '0rpx', btn: true },
      { x: `${widthChil + 15  }rpx`, y: '0rpx', btn: true },
      { x: `${widthFa - widthChil  }rpx`, y: '0rpx', btn: true },
      { x: '0rpx', y: `${widthChil + 15  }rpx`, btn: true },
      { x: `${widthChil + 15  }rpx`, y: `${widthChil + 15  }rpx`, btn: true },
      { x: `${widthFa - widthChil  }rpx`, y: `${widthChil + 15  }rpx`, btn: true },
      { x: '0rpx', y: `${widthFa - widthChil  }rpx`, btn: true },
      { x: `${widthChil + 15  }rpx`, y: `${widthFa - widthChil  }rpx`, btn: true },
      { x: `${widthFa - widthChil  }rpx`, y: `${widthFa - widthChil  }rpx`, btn: true },
    ],

最后，点击的时候

flipArr[index] = !flipArr[index];      
 
that.setData({
     flipArr,          
     isFlip: false
});

就可以实现翻转动画啦