戳這裡----♂--github--
css3 + react-id-swiper + react + redux + saga流星採用postcss的autoprefixer外掛程式，即可滿足大多數oppo，vivo手機的相容性問題。
閃爍星星
字的晃動
人的移動（動畫 + 監聽動畫結束時間）
橋的鋪墊
開啟旅程按鈕縮放
旋轉（+ 相容）
react-id-swiper
swiper配合css3實現切換
animation-name
animation-duration
animation-timing-function 速度曲線
animation-delay
animation-iteration-count
animation-direction
play-state
fill-mode
複製**
transform 屬性向元素應用 2d 或 3d 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。 其中 transform-origin (屬性改變被轉換元素的中心)。
三者區別： animation 動畫,關鍵幀，往復性。 transition 過渡, 屬性，觸發動作，一過性。 transform 變換, 複雜的變換引數。
改變位置translate3d,透明度opacity和大小scale。流星尾巴採用偽元素元素
:after旋轉-45deg(旋轉基點為左transform-origin: left;)；採用border可以實現，靠近頭部越亮，靠近尾部越暗。
.star
.star:after
@keyframes star-ani
50%
100%
}複製**
改變透明度
.shine
@keyframes opacity-change
50%
100%
}複製**
分為兩段動畫，下降和上公升。translatey改變即可。
.text-item-0
@keyframes letter-0
50%
100%
}@keyframes letter-0-1
100%
}複製**
切換dom，新增類控制移動和暫停，以及切換背景人物。監聽animationend事件。
jsx
$`} ref=}
/>:}
css.people
.people_move
.people_paused
@keyframes peopleup
100%
}@keyframes peoplemove
100%
}// 監聽動畫結束時機
componentdidupdate
() = this.state
if (peoplemove)
}複製**
配合background-size: cover;屬性實現。
.brige
@keyframes bridgefadein
100%
}複製**
利用transform scale2d 縮放轉換。
.icon-ciecle
@keyframes warn
25%
50%
75%
100%
}複製**
ios的animation-play-state: paused;不起作用，且animation動畫不可寫在新增類裡，必須寫在乙個類裡。（測試中發現，這裡有疑問。）
.music_img
.rotate-pause
@keyframes rotating
100%
}複製**
swiper的react版本，基本api都支援，具實驗目測相當於swiper v4。不一定通過api。也可以通過重寫css實現。
重寫css切換效果的話，會影響它本身的動畫效果，所以可通過新增不可滑動來控制。
1.
transition-delay: 1.6s;
}2.
noswiping: true,
noswipingclass: 'stop-swiping',
複製**
1.swiper的effect屬性與控制背景的opacity，利用時間差實現最終效果。包括迷宮的切換，揹包男的出現與消失，彈窗的出現與消失。2.swiper屬性的
activeindex，可以得到滑動到第幾頁，通過改變dom或者改變類，控制第幾頁動畫的發生。
// 根據activeindex拿到的頁數，控制該頁數state的改變，通過切換dom和新增類的方式，達到進場與退場的動畫效果。
const mazestyle = classnames()
const peoplestyle = classnames()
const popcardstyle = classnames()
>
'maze-container']}>
:// 不新增會影響swiper自身頁數的判斷
}複製**
別人寫的真牛x,自己只會opacity,translate。
記一次H5開發App經驗分享
在大學為了能夠有一定的開發經驗，選擇學校的科研訓練作為自己的第一次專案實踐。專案設計開發 首先編譯器選擇的hbuilderx輕便型編譯器，主要是借用它提供和安卓模擬器 我所使用的是夜神模擬器 埠號為62001 和海馬玩模擬器 埠號為26944 實時更新和打包功能。隨後開始重點頁面的 的編寫，在編寫的...
記一次h5拖放（Drag 和 drop）踩坑
定義和用法 ondrop 事件在可拖動元素或選取的文字放置在目標區域時觸發。拖放是 html5 中非常常見的功能。更多資訊可以檢視我們 html 教程中的 html5 拖放。注意 為了讓元素可拖動，需要使用 html5 draggable 屬性。在拖放的過程中會觸發以下事件 釋放目標時觸發的事件 上...
h5直播開發之旅總結
關於直播，有很多相關技術文章，這裡不多說。作為前端，我們比較關心我們所需要的。直播的大致流程 但實際我們需要處理一些不可控的情況，這是非常麻煩的。比如說，直播方網路不好，直播方關閉了攝像頭，這些情況都會導致推流斷掉，在文章後面，我們詳細說這一塊。目前我們先考慮直播的三種狀態 直播前，直播中，結束。針...