ReactCSSTransitionGroupChild模块实现了ReactCSSTransitionGroup的子组件切换样式的机制,样式切换的时机由ReactTransitionGroup模块完成,具体为子组件挂载、从ReactCSSTransitionGroup组件中添加或移除时触发appear类样式持续props.appearTimeout时间。
'use strict'; var React = require('./React'); // ReactAddonsDOMDependencies.getReactDOM()获取"react-dom"模块 var ReactAddonsDOMDependencies = require('./ReactAddonsDOMDependencies'); // 用于添加、移除、判断是否包含某个样式类,以及是否某个校验器 var CSSCore = require('fbjs/lib/CSSCore'); // 绑定或移除animationend、transitionend事件 var ReactTransitionEvents = require('./ReactTransitionEvents'); // 校验children是否单个reactElement节点并输出 var onlyChild = require('./onlyChild'); var TICK = 17; var ReactCSSTransitionGroupChild = React.createClass({ displayName: 'ReactCSSTransitionGroupChild', propTypes: { // name属性或者为字符串,作为样式类前缀,或者对象形式指派特定的样式类 name: React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.shape({ enter: React.PropTypes.string, leave: React.PropTypes.string, active: React.PropTypes.string }), React.PropTypes.shape({ enter: React.PropTypes.string, enterActive: React.PropTypes.string, leave: React.PropTypes.string, leaveActive: React.PropTypes.string, appear: React.PropTypes.string, appearActive: React.PropTypes.string })]).isRequired, // 赋值为true,组价被ReactTransitionGroup挂载、添加、移除时添加持续特定时间的样式类 appear: React.PropTypes.bool, enter: React.PropTypes.bool, leave: React.PropTypes.bool, // 样式类持续时间 appearTimeout: React.PropTypes.number, enterTimeout: React.PropTypes.number, leaveTimeout: React.PropTypes.number }, // 参数finishCallback为ReactTransitionGroup模块设定的回调函数,负责更新ReactTransitionGroup组件的state transition: function (animationType, finishCallback, userSpecifiedDelay) { // ReactAddonsDOMDependencies.getReactDOM()获取"react-dom"模块 var node = ReactAddonsDOMDependencies.getReactDOM().findDOMNode(this); if (!node) { if (finishCallback) { finishCallback(); } return; } // 获取样式类 var className = this.props.name[animationType] || this.props.name + '-' + animationType; var activeClassName = this.props.name[animationType + 'Active'] || className + '-active'; var timeout = null; // 移除样式类,并解绑animationend、transitionend事件,执行finishCallback回调 // finishCallback为ReactTransitionGroup模块设定的回调函数,负责更新ReactTransitionGroup组件的state // 也即样式类有效期为userSpecifiedDelay时间,如name+"-appear"、name+"-appear-active"有效到props.appearTimeout时间 // 若name+"-appear"、name+"-appear-active"无anmation、transition样式,且设置props.appearTimeout,样式将维持有效,直到节点被移除 var endListener = function (e) { if (e && e.target !== node) { return; } clearTimeout(timeout); CSSCore.removeClass(node, className); CSSCore.removeClass(node, activeClassName); ReactTransitionEvents.removeEndEventListener(node, endListener); if (finishCallback) { finishCallback(); } }; // 添加样式类 CSSCore.addClass(node, className); // 使用this.classNameAndNodeQueue缓存node节点和activeClassName样式类,并激活activeClassName样式类 this.queueClassAndNode(activeClassName, node); // userSpecifiedDelay时间或当即移除样式类className、activeClassName if (userSpecifiedDelay) { timeout = setTimeout(endListener, userSpecifiedDelay); this.transitionTimeouts.push(timeout); } else { ReactTransitionEvents.addEndEventListener(node, endListener); } }, // 使用this.classNameAndNodeQueue缓存node节点和activeClassName样式类,并激活activeClassName样式类 queueClassAndNode: function (className, node) { this.classNameAndNodeQueue.push({ className: className, node: node }); if (!this.timeout) { this.timeout = setTimeout(this.flushClassNameAndNodeQueue, TICK); } }, // 激活所有node节点的对应activeClassName样式类 flushClassNameAndNodeQueue: function () { if (this.isMounted()) { this.classNameAndNodeQueue.forEach(function (obj) { CSSCore.addClass(obj.node, obj.className); }); } this.classNameAndNodeQueue.length = 0; this.timeout = null; }, componentWillMount: function () { this.classNameAndNodeQueue = []; this.transitionTimeouts = []; }, componentWillUnmount: function () { if (this.timeout) { clearTimeout(this.timeout); } this.transitionTimeouts.forEach(function (timeout) { clearTimeout(timeout); }); this.classNameAndNodeQueue.length = 0; }, // 参数done为ReactTransitionGroup模块设定的回调函数,负责当前元素被移除时更新ReactTransitionGroup组件的state // componentWillAppear方法的执行时机由ReactTransitionGroup模块设定,组件加载时执行 componentWillAppear: function (done) { if (this.props.appear) { this.transition('appear', done, this.props.appearTimeout); } else { done(); } }, componentWillEnter: function (done) { if (this.props.enter) { this.transition('enter', done, this.props.enterTimeout); } else { done(); } }, componentWillLeave: function (done) { if (this.props.leave) { this.transition('leave', done, this.props.leaveTimeout); } else { done(); } }, render: function () { return onlyChild(this.props.children); } }); // ReactTransitionGroup模块负责样式切换的时机,如子组件挂载、添加或移除时 // ReactCSSTransitionGroupChild模块用于实现子组件样式的切换机制,添加含有动画的样式,动画执行完成后移除 // 并执行ReactTransitionGroup模块所需的回调 module.exports = ReactCSSTransitionGroupChild;
相关推荐
2848
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
计算机视觉+图片拼接+图片分割
python模块onnxruntime版本
python模块onnxruntime版本
python模块onnxruntime版本
B2113 输出亲朋字符串
字符数组测试版本
快速排序
AUTOSAR_SWS_EEPROMDriver.pdf
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域,每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写,确保了在对应环境下能够无缝运行。同时,源码中配备了详细的注释和文档,帮助用户快速理解代码结构和实现逻辑。 适用人群: 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生,还是对其他领域编程感兴趣的学生,这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码,你可以掌握各平台开发的基础知识,提升编程能力和项目实战经验。 使用场景及目标: 在学习阶段,你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码,你将深入了解各平台开发的技术细节和最佳实践,逐步培养起自己的项目开发和问题解决能力。此外,在求职或创业过程中,具备跨平台开发能力的大学生将更具竞争力。 其他说明: 为了确保源码资源的可运行性和易用性,特别注意了以下几点:首先,每份源码都提供了详细的运行环境和依赖说明,确保用户能够轻松搭建起开发环境;其次,源码中的注释和文档都非常完善,方便用户快速上手和理解代码;最后,我会定期更新这些源码资源,以适应各平台技术的最新发展和市场需求。
MATLAB是MathWorks公司出品的商业数学软件,用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人,控制系统等领域。 【主页资源】 遗传算法、免疫算法、退火算法、粒子群算法、鱼群算法、蚁群算法和神经网络算法等常用智能算法的MATLAB实现,包含TSP、LQR控制器、结合量子算法、多目标优化、粒子群等matlab程序。 MATLAB计算机视觉与深度学习实战项目:直方图优化去雾技术、基于形态学的权重自适应图像去噪、多尺度形态学提取眼前节组织、基于分水岭算法的肺癌分割诊断、基于harris 的角点检测(可以直接用matlab自带的函数)、基于K均值的据类算法分割(算法时间有点久)、 区域生长算法进行肝部肿瘤分割(原始分割精度不高)、matlab编写的图像处理相关算法代码及算法原理等等。
MATLAB是MathWorks公司出品的商业数学软件,用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人,控制系统等领域。 【主页资源】 遗传算法、免疫算法、退火算法、粒子群算法、鱼群算法、蚁群算法和神经网络算法等常用智能算法的MATLAB实现,包含TSP、LQR控制器、结合量子算法、多目标优化、粒子群等matlab程序。 MATLAB计算机视觉与深度学习实战项目:直方图优化去雾技术、基于形态学的权重自适应图像去噪、多尺度形态学提取眼前节组织、基于分水岭算法的肺癌分割诊断、基于harris 的角点检测(可以直接用matlab自带的函数)、基于K均值的据类算法分割(算法时间有点久)、 区域生长算法进行肝部肿瘤分割(原始分割精度不高)、matlab编写的图像处理相关算法代码及算法原理等等。
目前实现的功能: 示波器 伏特计 逻辑分析仪(实验性) PWM测量 PWM输出 基于DDS(直接数字合成)的发生器 功能的选择取决于所选的目标。在小型器件上,由于外设约束或引脚排列有限,仅实现了功能子集。 固件还可以在不同的配置之间切换。例如,和 .Voltmeter + PWMOscilloscope + PWM 固件通过虚拟 COM 端口(USB CDC 类)直接或使用 UART 转 USB 桥接器与 PC 应用程序通信。 如何运行固件 您可以在发布部分下载已编译的二进制文件,并通过 ST-Link(或任何其他调试器)或通过 USB 设备固件更新 (DFU) 下载
C++与操作系统等面试题55
1.雷电模拟器安装设置 1.1 安装模拟器 1.2 模拟器设置 2.PC电脑上的证书查看及清理 3.安装抓包工具 Charles 并安装根证书 4.Charles代理设置 5.设置模拟器WIFI代理并下载安装证书 6.RootExplorer安装及使用 7.测试抓包APP网络请求数据
岗位管理体系5大要素全解读.pdf
AUTOSAR_SWS_DefaultErrorTracer.pdf
京瓷方式人才培养制度第二部分.pdf
onnxruntime-1.3.0-cp37-cp37m-linux_armv7l.whl.zip