• 小程序动画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(),
    })
    }
    },

     

     

     

  • 相关阅读:
    mac系统xcode升级等软件更换appid账户
    touch id 开发
    iOS自动化编译
    cocopods 知识集合 及 一个 好的 国外iOS技术翻译站
    cocoapods 更新失败 bad response Not Found 404 (http://ruby.taobao.org/specs.4.8.gz)
    iOS流量监控
    火星信息安全研究院
    Xcode6.1标准Framework静态库制作方法。工程转Framework,静态库加xib和图片。完美解决方案。
    Linux各目录及每个目录的详细介绍
    Linux du命令
  • 原文地址:https://www.cnblogs.com/wjhaaa/p/9913979.html
Copyright © 2020-2023  润新知