Taro 动画之放大缩小

直接上效果

taro 动画

代码：

scss：

.margin50 {margin-bottom: 50px;
}
.container {width: 100%;height: 100%;
}.tips {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.3);z-index: 2000;display: flex;justify-content: center;align-items: center;
}
.box {opacity: 0;width: 620px;background: #fff;padding: 35px;border-radius: 30px;box-sizing: border-box;
}
.title {font-size: 34px;color: #333;font-weight: bold;text-align: center;margin-bottom: 20px;
}
.content {color: #666;font-size: 28px;line-height: 42px;
}
.btn {width: 430px;height: 80px;line-height: 80px;text-align: center;color: #fff;font-size: 30px;border-radius: 40px;background: #F8AF18;margin: 35px auto 0;
}

tsx：

import Taro , { Component } from '@tarojs/taro';
import { View, Button, Input } from '@tarojs/components';
import './animation.scss'export default class InvoiceOpen extends Component<any, any> {state = {cate: false, // 判断是否显示 动画分类define: false, // 判断是否显示 动画的概念animationData: {}}duration: number = 300moving: boolean = falseanimation: any = Taro.createAnimation({duration: this.duration,timingFunction: 'ease'})showTips() {this.animation.opacity(0).scale(0.01).step({duration: 32,timingFunction: 'step-start',})this.animation.opacity(1).scale(1).step({duration: this.duration,timingFunction: 'ease',})this.setState({animationData: this.animation.export()},() => {setTimeout(() => {this.moving = false}, this.duration)})}hideTips(cb) {this.moving = truethis.animation.scale(0.01).step({duration: this.duration,timingFunction: 'ease',})this.animation.opacity(0).step({duration: 32,timingFunction: 'step-start',})this.setState({animationData: this.animation.export()},() => {setTimeout(() => {this.moving = falsecb && cb()}, this.duration)})}// 发票须知 显示、隐藏showInvoiceTips() {this.moving = truethis.setState({cate: true}, () =>{this.showTips()})}hideInvoiceTips() {if (this.moving) returnthis.hideTips(() => {this.setState({cate: false})})}// 发票税号说明 显示、隐藏showTaxTips() {this.moving = truethis.setState({define: true}, () =>{this.showTips()})}hideTaxTips() {if (this.moving) returnthis.hideTips(() => {this.setState({define: false})})}render() {return (<View><View className="container"><Button className="margin50" onClick={this.showTaxTips}>动画的概念</Button><Button onClick={this.showInvoiceTips}>动画分类</Button>// 没有 input 会出问题，具体原因不明<Input/></View>{/* 动画分类 */}{this.state.cate && <View className="tips"><View className="box" onClick={e => e.stopPropagation()} animation={this.state.animationData}><View className="title">动画分类</View><View className="content"><View>按工艺技术分为：平面手绘动画、立体拍摄动画、虚拟生成动画、真人结合动画；</View><View>按传播媒介分为：影院动画、电视动画、广告动画、科教动画；</View><View>按动画性质分为：商业动画、实验动画。</View></View><Button className="btn" onClick={this.hideInvoiceTips}>我知道了</Button></View></View>}{/* 动画的概念 */}{ this.state.define && <View className="tips"><View className="box" onClick={e => e.stopPropagation()} animation={this.state.animationData}><View className="title">动画的概念</View><View className="content">动画的概念不同于一般意义上的动画片，动画是一种综合艺术，它是集合了绘画、电影、数字媒体、摄影、音乐、文学等众多艺术门类于一身的艺术表现形式。最早发源于19世纪上半叶的英国，兴盛于美国，中国动画起源于20世纪20年代。动画是一门年轻的艺术，它是唯一有确定诞生日期的一门艺术，1892年10月28日埃米尔·雷诺首次在巴黎著名的葛莱凡蜡像馆向观众放映光学影戏，标志着动画的正式诞生，同时埃米尔·雷诺也被誉为“动画之父”。动画艺术经过了100多年的发展，已经有了较为完善的理论体系和产业体系，并以其独特的艺术魅力深受人们的喜爱。</View><Button className="btn" onClick={this.hideTaxTips}>我知道了</Button></View></View>}</View>);}
}

这段代码中有一个 input 标签，当注释或者不存在时，动画会出现 bug，具体原因不知，希望有大佬可以解答。
bug效果如下：

taro 动画之bug

Taro 动画之放大缩小相关推荐

小程序动画-循环放大缩小的动画（一闪一闪的）
var circleCount = 0; // 心跳的外框动画 this.animationMiddleHeaderItem = wx.createAnimation({ duration:1000, ...
ppt矩形里面的图片怎么放大缩小_ppt 怎么让图片放大完成以后再缩小到原来的大小和位子！！！！...
本人也在学习中,愿意与大家一起探讨.第一步:点击图片[添加动画][强调][放大缩小][较小]或[微小].第二步:再[添加动画][动作路径][直线]或[自定义路径]自己选择路径返回到原点.放大缩小与动作 ...
ppt矩形里面的图片怎么放大缩小_PPT图片如何点击放大
PPT图片如何点击放大 [提要]<[电脑]PPT中图片点击放大效果的实现>由小编收集整理的,谨供需要实现电脑的朋友参考.内容如下: 用PPT做产品展示时,我们需要让观众看清楚细节.但同时又 ...
ppt矩形里面的图片怎么放大缩小_这样的九宫格缩放效果，是怎么用PPT做出来的呢？...
<网球王子>中的比赛环节,往往会有一种画面缩放的效果(类似于下图),就是把画面分成了9块,每块以不同的缩放方式变化,这样的效果,如果用在PPT中,也是一种不错的处理哦.那么问题来了,这样的 ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
112、Flutter实现图片放大缩小的动画小
Flutter是通过Animation组件来实现动画效果的 main.dart文件中的内容与上一篇显示的代码相同这一篇博客主要关注放大缩小的动画效果 1.WelcomeScreen widget继 ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
Flash实例教程：鼠标感应放大缩小动画_Flash_||太平洋电脑网
本Flash教程教你制作一个跟随鼠标变大变小的动画特效,主要利用遮罩来实现的. 效果: 下面是制作步骤: 首先新建文档. 图1 然后导入一幅图片当做背景,我们首先把图片转换为影片剪辑元件,然后在该图层 ...

Taro 动画之放大缩小

直接上效果

代码：

scss：

tsx：

Taro 动画之放大缩小相关推荐

最新文章

热门文章

Taro 动画 之放大缩小

直接上效果

代码：

scss：

tsx：

Taro 动画 之放大缩小相关推荐

最新文章

热门文章

Taro 动画之放大缩小

Taro 动画之放大缩小相关推荐