1、实现效果
guideFollow.gif
2.实现原理
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.实现代码
<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({
/**
* 页面的初始数据
*/
data: {
isShow: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
let flag = wx.getStorageSync("hasEnter");
if (flag) {
this.setData({
isShow: true
})
}
},
setEnter() {
this.setData({
isShow: true
})
wx.setStorageSync("hasEnter", true);
},
})
