• 小程序动画Animation,高度增加动画形式,图标旋转动画形式


    <view class="serach-title serach-list"  animation="{{animatheightadd}}" >
    <i-row class="serach-top">
    <i-col span="12" i-class="serach-titleLeft">航空汽油<i-icon type="collection_fill" size="15" color="#FFCB68"/></i-col>
    <i-col span="12" i-class="serach-titleRight">3175.38</i-col>
    </i-row>
    <i-row class="source">
    <i-col span="12" i-class="source-word">来源: 英国环境、食品及农村事务部 (DEFRA)(2016) - 范畴一</i-col>
    <i-col span="12" i-class="source-value">kgCO2/t<i-icon type="playon_fill" class="menuclick"
    data-show="{{isdown}}"  size="12" color="#62B0F2"
    bindtap="menuclick" animation="{{animationData}}"/></i-col>
    </i-row>
    <i-row class="data-list">
    <i-col span="12" i-class="data-listLeft word1">3127.67</i-col>
    <i-col span="12" i-class="data-listRight word1">kgCO2/t</i-col>
    </i-row>
    <i-row class="data-list">
    <i-col span="12" i-class="data-listLeft word2">3127.67</i-col>
    <i-col span="12" i-class="data-listRight word2">kgCO2/t</i-col>
    </i-row>
    <i-row class="data-list">
    <i-col span="12" i-class="data-listLeft word3">3127.67</i-col>
    <i-col span="12" i-class="data-listRight word3">kgCO2/t</i-col>
    </i-row>
    </view>

    menuclick(e){
    var that=this;
    var is=e.currentTarget.dataset.show
    var animation = wx.createAnimation({
    duration: 500,
    timingFunction: "ease",
    delay: 0,
    transformOrigin: "50% 50%",
    })
    var animatheightadd = wx.createAnimation({
    duration: 500,
    timingFunction: 'ease-in',
    })
    if(that.data.isdown==false){
    animation.rotate(90).step();
    animatheightadd.height(200).step()
    that.setData({
    isdown:true,
    animationData: animation.export(),
    animatheightadd: animatheightadd.export(),
    })
    }else{
    animation.rotate(0).step();
    animatheightadd.height(75).step()
    that.setData({
    isdown:false,
    animationData: animation.export(),
    animatheightadd: animatheightadd.export(),
    })
    }
    },

     

     

     

  • 相关阅读:
    线程池
    单例设计模式
    String,StringBuffer,StringBuilder
    马踏棋盘算法
    最短路径问题 (迪杰斯特拉算法,弗洛伊德算法)
    最小生成树 修路问题(普里姆算法,克鲁斯卡尔算法)
    贪心算法 求解集合覆盖问题
    Stream 数组转换
    unittest与pytest对比
    条件编译
  • 原文地址:https://www.cnblogs.com/wjhaaa/p/9913979.html
Copyright © 2020-2023  润新知