小程序旋转动画

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

 <view class='clist fs26' bindtap='godet'>
      <view> 项目名称：萌卡纳</view>
       <view class='f-r '> 
        {{item.show==true?"收起":"详情"}}
       <view class='cimg {{show==true?"xz180":""}}'>
        <image mode='aspectFill' src='../../icon/xia.png'></image>
       </view>
       </view>
 </view>


.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 () {

  }
})

猜你喜欢