Wechat applet guides users to add applet animation page

1、 Realization effect

2. Realization principle

2.1 Animation effect

css Animation ：animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

Set the animation duration of the above three paragraphs , The last paragraph of text animation lasts the longest .

.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;
}

The animation effect is , from 0 To 100 The process of , Visibility by 0 To 1（opacity）,translate3d Of x The direction is determined by -100% To 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 Determine whether to pop-up the frame

wx.getStorageSync（‘key’）
wx.setStorageSync(“key”, value); What needs to be stored . Only native types are supported 、Date、 And be able to pass JSON.stringify Serialized objects

When the user first enters the applet page , Pop up boot add applet , When the user clicks ‘ Keep sth. in mind , I'll try ’ Button , In an key Value to the page cache , When the user next enters , First, determine whether there is this in the cache key, If you have any key Value does not show the boot popup , Otherwise, the user will be prompted .

3. Implementation code

<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"> Click on the top right corner 
        <view class="show_jiao flex-row">
          <view></view>
        </view>
      </view>
    </view>
    <view class="flex show_item">
      <view class="box_index">2</view>
      <view> Click on " Add to my applet "</view>
    </view>
    <view class="flex show_item">
      <view class="box_index">3</view>
      <view> Go back to the drop-down list on the wechat homepage , Find my applet , Open Susu's demo</view>
    </view>
    <view class="show_btn" catchtap="setEnter"> Keep sth. in mind , I'll try </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;
}

/*  Animation  */


@-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  */
.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({
    

  /** *  Initial data of the page  */
  data: {
    
    isShow: false
  },

  /** *  Life cycle function -- Monitor page loading  */
  onLoad(options) {
    
    let flag = wx.getStorageSync("hasEnter");
    if (flag) {
    
      this.setData({
    
        isShow: true
      })
    }
  },
  setEnter() {
    
    this.setData({
    
      isShow: true
    })
    wx.setStorageSync("hasEnter", true);
  },
})

4. More applet related , Official account Su Su bug, More applets demo, All in Su Su's code cloud If it helps you , Welcome to star+ subscribe ！