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(),
    })
    }
    },

     

     

     

  • 相关阅读:
    Python3爬取前程无忧数据分析工作并存储到MySQL
    MySQL操作数据库和表的基本语句(DDL
    MyBatis的增删改查操作
    指定方向或者位置移动
    AI-Tank
    转载人家写的CURSOR
    Ajax学习整理笔记
    全面解析注解
    java调用存储过程mysql
    JAVA如何调用mysql写的存储过程
  • 原文地址:https://www.cnblogs.com/wjhaaa/p/9913979.html
Copyright © 2011-2022 走看看