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