zoukankan      html  css  js  c++  java
  • 小程序动画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(),
    })
    }
    },

     

     

     

  • 相关阅读:
    HTML: 表单标签、CSS语法、CSS选择器、CSS属性
    HTML:快速入门、表格标签
    JDBC连接池&JDBCTemplate
    JDBC
    MYSQL多表查询&事务
    使用CompletionService批处理任务(线程池阻塞线程)
    java运行字符串代码
    Linux常用命令大全(非常全!!!)
    SpringBoot防止重复请求,重复表单提交超级简单的注解实现
    在Spring-boot中,为@Value注解添加从数据库读取properties支持
  • 原文地址:https://www.cnblogs.com/wjhaaa/p/9913979.html
Copyright © 2011-2022 走看看