首页 > 编程语言 >小程序的animation如何在组件中使用

小程序的animation如何在组件中使用

时间:2023-04-18 09:56:13浏览次数:39  
标签:50% 程序 ani animation 组件 页面

关于小程序的animation使用方法,在页面中使用可以参考小程序的api文档。
在组件中如何创建和使用呢,首先关于组件和页面的生命周期中,小程序页面控制组件的if要写在页面组件上防止提前创建组件

然后在组件中参考小程序组件和页面的生命周期,created和attached都是在渲染前的

因此组件的动画实例方法应该放在ready生命周期中,下面为组件方法
js
lifetimes:{ attached: function () { // 在组件实例进入页面节点树时执行 // this.ani = wx.createAnimation() }, ready:function(){ this.start() } },
properties: { showBind:Boolean, // 展示弹框 },
data: { ani:{} },
methods: { start(){ var ani = wx.createAnimation() ani.opacity(1).step({duration: 1000}) this.setData({ ani:ani.export() }) console.log(this.data.ani) }, }

html
<root-portal wx:if="{{showBind}}"> <view class="box"> <view class="content" animation='{{ani}}' catchtap="start"> 111 </view> </view> </root-portal>

css
.box { position: absolute; z-index: 2; top: 50%; left: 50%; height: 500rpx; width: 50%; transform: translate(-50%, -50%); }
.content { position: relative; opacity: 0; width: 100%; height: 100%; background-color: red; }

标签:50%,程序,ani,animation,组件,页面
From: https://www.cnblogs.com/xzhxzhxzhfirst/p/17328456.html

相关文章

  • 界面控件DevExpress WPF甘特图组件,让项目管理拥有极佳性能!
    DevExpressWPF Gantt(甘特图)控件允许开发者在任何WPF桌面应用程序中快速集成项目计划和任务调度功能。在上文中(点击这里回顾>>)我们介绍了DevExpressWPF甘特图的性能、动态缩放等,本文将继续分享甘特图的其他功能,持续关注我们获取更多产品中文资讯哦~DevExpressWPF拥有120+个控......
  • vue往组件中传值,值在组件内如何实现修改
    Vuewarn]:Avoidmutatingapropdirectlysincethevaluewillbeoverwrittenwhenevertheparentcomponentre-renders.Instead,useadataorcomputedpropertybasedontheprop'svalue.Propbeingmutated:"type"这是Vue的一个警告提示,意思是应该避免直......
  • React 组件进入和退出动画实现
    在实现一个React中的弹框组件时,想给组件加个进入和退出动画,但发现React没有Vue3那样现成的api,因此需要自己设计。主要思路为给组件添加一个state来选择className,不同的className会给组件添加不同的动画效果,再使用cssanimation中的forwards来使组件固定在结束的位置。核心代码如......
  • 业余爱好者想入门编程,一定远离那些只会说No的家伙,尤其程序员
    视频:https://haokan.baidu.com/v?pd=wisenatural&vid=3050207991292418741自媒体上的程序员群体有一个非常有意思的特点,就是特别愿意否定别人,特别喜欢说no,还有一个特点,特别不爱分享一些有用的技术和知识,你就看吧,就是在B站也好,在西瓜也好,很多很多露脸的程序员。几乎不跟你讲那......
  • 2-29 在程序中定义一个整型变量,赋以1~100的值,要求用户猜这个数,比较两个数的大小,把结果
    设计思路:由题意可判断出可通过循环结构以及if和while判断语句相结合来完成程序的实现 流程图: 代码:#include<iostream>usingnamespacestd;intmain(){intm=96,n=0;while(m!=n){cin>>n;if(m>n)cout<<"小了"<<endl;......
  • 程序员面试金典---8
    下一个数思路:求出从最低位的1开始的连续的1的区间将此区间全部变为0,并将区间左侧的那个0变为1将第1步取出的区间右移,直到剩下的1的个数减少一个将第2步和第3步的结果相或/***@param{number}num*@return{number[]}*/varfindClosedNumbers=function(num){......
  • inno setup 提前安装外围程序,比如.net framework
    [Files]Source:..\framework.exe;DestDir:{tmp};Flags:dontcopy[code]functionInitializeSetup():Boolean;varPath:string;ResultCode:Integer;beginExtractTemporary......
  • 交直流输电网的潮流计算,程序同时有统一法和交替法两种不同的潮流计算方法
    交直流输电网的潮流计算,程序同时有统一法和交替法两种不同的潮流计算方法,只需要改变Method标志位就可以改变方法程序基于11节点的网络开展的交直流潮流计算同时还送一篇基本类似的大lunwen 当然不是完全相同不过有很大的参考价值程序可以正常运行YID:9650672458640760......
  • 挑战程序设计竞赛---Ants
    Anarmyofantswalkonahorizontalpoleoflengthlcm,eachwithaconstantspeedof1cm/s.Whenawalkingantreachesanendofthepole,itimmediatellyfallsoffit.Whentwoantsmeettheyturnbackandstartwalkinginoppositedirections.Wekno......
  • pta程序设计辅助平台-练习
    现在要开发一个系统,管理对多种汽车的收费工作。给出下面的一个基类框架classVehicle{protected:stringNO;public:Vehiclvirtualintfee()=0;//计算应收费用};以Vehicle为基类,构建出Car、Truck和Bus三个类。Car的收费公式为:载客数*8+重量*2Truck的收费公式为:重量*5Bus的收费......