微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫(huà)
更新時(shí)間：2022年04月20日 14:55:39 作者：學(xué)海無(wú)涯之不悔
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)九宮格翻牌動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)九宮格翻牌的具體代碼，供大家參考，具體內(nèi)容如下
9宮格翻牌需求：
1.進(jìn)來(lái)時(shí)平鋪9個(gè)格子顯示
2.點(diǎn)擊開(kāi)始抽獎(jiǎng)時(shí)洗牌動(dòng)作
3.洗完牌后呈現(xiàn)9個(gè)都是未翻牌的狀態(tài)
4.點(diǎn)擊任意一個(gè)牌子，有翻轉(zhuǎn)的動(dòng)作
5.翻轉(zhuǎn)結(jié)束后出現(xiàn)中獎(jiǎng)的彈窗
555，當(dāng)時(shí)真的一點(diǎn)一點(diǎn)調(diào)動(dòng)畫(huà)
敲黑板~
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: 動(dòng)畫(huà)基本上我是用添加class類(lèi)樣式控制的
.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;
}
?
?
?
// 翻牌動(dòng)畫(huà)
.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 屬性定義當(dāng)元素不面向屏幕時(shí)是否可見(jiàn)*/
? ? 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); }
}當(dāng)時(shí)9個(gè)牌子，我用js創(chuàng)建數(shù)組存儲(chǔ)x/y和按鈕是否點(diǎn)擊(動(dòng)了點(diǎn)小腦袋)
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 },
? ? ],最后，點(diǎn)擊的時(shí)候
flipArr[index] = !flipArr[index]; ? ? ?
?
that.setData({
? ? ?flipArr, ? ? ? ? ?
? ? ?isFlip: false
});就可以實(shí)現(xiàn)翻轉(zhuǎn)動(dòng)畫(huà)啦。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
先來(lái)看一下幾個(gè)常用瀏覽器的攔截設(shè)置2010-02-02
這篇文章主要介紹了如何使用pdf.js展示pdf文件(親測(cè)可用),如果只是電腦端,可通過(guò) iframe 標(biāo)簽嵌套預(yù)覽,文中介紹了安裝電腦ios的通用方法,感興趣的朋友跟隨小編一起看看吧2023-10-10
單行 JS 實(shí)現(xiàn)移動(dòng)端金錢(qián)格式的輸入規(guī)則
這篇文章主要介紹了單行 JS 實(shí)現(xiàn)移動(dòng)端金錢(qián)格式的輸入規(guī)則,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-05-05
slice()方法和splice()方法都是原生js中對(duì)數(shù)組操作的方法。那么他兩種有什么區(qū)別呢？今天通過(guò)本文教程給大家簡(jiǎn)單介紹下,需要的朋友可以參考下2017-03-03
原生JS和jQuery操作DOM對(duì)比總結(jié)
這篇文章主要給大家介紹了原生JS和jQuery操作DOM的一些對(duì)比總結(jié)，文中總結(jié)了很多的對(duì)比，相信對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-01-01
JavaScript實(shí)現(xiàn)手寫(xiě)原生任務(wù)定時(shí)器
定時(shí)器顧名思義就是在某個(gè)特定的時(shí)間去執(zhí)行一些任務(wù)，現(xiàn)代的應(yīng)用程序早已不是以前的那些由簡(jiǎn)單的增刪改查拼湊而成的程序了，高復(fù)雜性早已是標(biāo)配，而任務(wù)的定時(shí)調(diào)度與執(zhí)行也是對(duì)程序的基本要求了。本文將利用JavaScript手寫(xiě)原生任務(wù)定時(shí)器，需要的可以參考一下2022-03-03
兼容主流瀏覽器的 iframe 自適應(yīng)高度，很實(shí)用的，具體的js腳本如下，感興趣的朋友可不要錯(cuò)過(guò)2014-01-01
這篇文章主要介紹了微信小程序常見(jiàn)的兩種登錄方式,一種基于手機(jī)號(hào)碼進(jìn)行登錄,另一種是使用用戶(hù)在公眾號(hào)下的唯一標(biāo)識(shí)進(jìn)行登錄,需要的朋友可以參考下2024-05-05
js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能
這篇文章主要介紹了js+canvas實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證碼功能，本文結(jié)合實(shí)例代碼分步驟給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-03-03
JavaScript下利用fso判斷文件是否存在的代碼，需要的朋友可以參考下，這個(gè)一般需要運(yùn)行確認(rèn)的。2010-12-12