1田藐、實現(xiàn)效果
guideFollow.gif
2.實現(xiàn)原理
2.1 動畫效果
css動畫：animation
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
設置上面三段內容不同的動畫時長宇植，最后一段文字動畫時長最長怠苔。
.show_box .show_item:nth-child(1) {
animation: fadeIn-left 1s;
}
.show_box .show_item:nth-child(2) {
animation: fadeIn-left 2s;
}
.show_box .show_item:nth-child(3) {
animation: fadeIn-left 3s;
}
動畫效果為同廉，從0到100的過程，可見度由0到1（opacity），translate3d 的x方向由-100%到0（transform）迫肖。
from {
opacity : 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform : translate3d(-100%, 0, 0);
}
to {
opacity : 1;
-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);
}
2.2 判斷是否彈框
wx.getStorageSync（‘key’）
wx.setStorageSync("key", value);需要存儲的內容锅劝。只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象
當用戶首次進入該小程序頁面穆碎，彈出引導添加小程序镀脂，當用戶點擊‘記住了，我去試試’按鈕時稠集，存入一個key值到頁面緩存中，當用戶下一次進入時候饥瓷，先判斷緩存中是否有該key剥纷，若有key值不展示該引導彈框，反之提示用戶呢铆。
3.實現(xiàn)代碼
<view hidden="{{isShow}}">
<view class="mask"></view>
<view class="show_box">
<view class="flex show_item">
<view class="box_index">1</view>
<view class="flex-row">點擊右上角
<view class="show_jiao flex-row">
<view></view>
</view>
</view>
</view>
<view class="flex show_item">
<view class="box_index">2</view>
<view>點擊"添加到我的小程序"</view>
</view>
<view class="flex show_item">
<view class="box_index">3</view>
<view>回到微信首頁下拉列表中晦鞋，找到我的小程序，打開蘇蘇的demo</view>
</view>
<view class="show_btn" catchtap="setEnter">記住了,我去試試</view>
</view>
</view>
.show_box {
top : 20%;
position : fixed;
width : 100%;
z-index : 1111;
box-sizing: border-box;
padding : 30px;
color : #fff;
font-size : 25rpx;
}
.show_box .show_item {
margin-bottom: 50rpx;
}
.show_box .show_item:nth-child(1) {
animation: fadeIn-left 1s;
}
.show_box .show_item:nth-child(2) {
animation: fadeIn-left 2s;
}
.show_box .show_item:nth-child(3) {
animation: fadeIn-left 3s;
}
.show_box .show_jiao {
border : 1px dashed #fff;
width : 95rpx;
height : 40rpx;
margin-left : 20px;
text-align : center;
vertical-align: top;
border-radius : 20rpx;
font-size : 30px;
}
.show_box .show_jiao view {
width : 13rpx;
height : 13rpx;
background : #fff;
border-radius: 50%;
box-shadow : 22rpx 0rpx #fff, -22rpx 0 #fff;
margin : 0 auto;
}
.show_box .box_index {
font-size : 20rpx;
flex-shrink : 0;
color : #fff;
line-height : 40rpx;
width : 40rpx;
height : 40rpx;
text-align : center;
border-radius: 50%;
background : #e4a451;
margin-right : 20rpx;
}
.show_box .show_btn {
border : 1px dashed #fff;
width : 70%;
animation : fadeIn 7s;
font-size : 30rpx;
line-height : 72rpx;
text-align : center;
border-radius: 44rpx;
margin : 12% auto 0 auto;
color : #fff;
}
/* 動畫 */
@-webkit-keyframes fadeIn-left {
from {
opacity : 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform : translate3d(-100%, 0, 0);
}
to {
opacity : 1;
-webkit-transform: none;
transform : none;
}
}
@keyframes fadeIn-left {
from {
opacity : 0;
-webkit-transform: translate3d(-100%, 0, 0);
transform : translate3d(-100%, 0, 0);
}
to {
opacity : 1;
-webkit-transform: translate3d(0, 0, 0);
transform : translate3d(0, 0, 0);
}
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* 遮罩 */
.mask {
position : fixed;
z-index : 1000;
top : 0;
right : 0;
left : 0;
bottom : 0;
background : rgba(0, 0, 0, .6);
-webkit-transition-duration: .3s;
transition-duration : .3s;
}
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
isShow: false
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad(options) {
let flag = wx.getStorageSync("hasEnter");
if (flag) {
this.setData({
isShow: true
})
}
},
setEnter() {
this.setData({
isShow: true
})
wx.setStorageSync("hasEnter", true);
},
})
