小程序旋转动画

超、凢脫俗 2022-04-18 00:48 230阅读 1赞

做了一个简单的小程序箭头旋转动画效果。

![20181106103242753.png][]

![20181106103256363.png][]

.clist{
      width: 100%;
      height: 50rpx;
      padding: 10rpx 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #393F59;
      color: white;
    }
    .cimg{
      width: 30rpx;
      height: 30rpx;
      padding: 10rpx;
      transition: All 0.4s ease-in-out;
      }
      .cimg image{
        width: 100%;
        height:100%;
      }
      .xz180{
        transform: rotate(180deg);
      }
    .f-r{
      display: flex;
      justify-content: center;
      align-items: center;
    }

// pages/customer/customer.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
       
           show: false
          
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
      godet:function(e){
        that.setData({
          show:!that.data.show
        })
      },
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

[20181106103242753.png]: /images/20220418/b44c65a587de477781e2a82ffcb967ab.png
[20181106103256363.png]: /images/20220418/216b53c6aa7d4d90afc934c64627dd5b.png