程序员经验分享-hwhale

淡出旧元素，淡入新元素

2023-12-30

我是新来反应并尝试过反应动画 http://facebook.github.io/react/docs/animation.html。当在 TransitionGroup 中添加或删除元素时，它们非常有用。但是，如果我用类似的元素替换单个元素，React 会检测到该元素的内容已更改并且不会触发动画。

如何在同一位置淡出单个元素并淡入新元素？ 例如淡出login-div，淡入dashboard-div。


如果你的元素有不同key属性，TransitionGroup 将卸载其中一个并安装另一个。

您可以在此处阅读有关密钥的更多信息：组合与继承 https://reactjs.org/docs/composition-vs-inheritance.html#dynamic-children.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Animation

ReactJS

淡出旧元素，淡入新元素 的相关文章

  • 如何在javascript中动态向对象数组添加值？

    这是一个对象数组 var data label 1 value 12 label 1 value 12 label 1 value 12 label 1 value 12 我如何动态地为这些添加值 我尝试了以下代码但没有成功 var lab

  • 如何检查是否存在可能的路径？

    我正在开发一个基于 javascript 的实验性游戏 玩家必须在二维平铺地图上移动才能退出 请随意检查这个小提琴并演奏 http jsfiddle net moonlife 74vLd 我只是随机放置障碍物 但有时障碍物会挡住玩家和出口之

  • HTML 和 标签有什么区别？

    HEAD 标签和 BODY 标签有什么区别 大多数 HTML 书籍仅 简短 提及 and 标签 但它们消失得很快 它们会影响浏览器呈现网页的方式吗 另外 它们会影响 javascript 的运行顺序吗 我的意思是 如果我里面有一个javas

  • jQuery 可以操作插入的元素吗？

    我是 jQuery 的新手 我认为 jQuery 可以操作由代码添加的元素是合理的 但我发现现在还不能 function addVideo click function publisher append div div

  • Dialogflow Fulfillment Webhook 调用失败

    I am new to dialogflow fulfillment and I am trying to retrieve news from news API based on user questions I followed doc

  • 在 React 中使用 .less 文件

    我正在尝试将 less 文件与极简主义 React 应用程序一起使用 使用创建反应应用程序 我已经添加less and less loader to my 包 json以及我的模块规则webpack config js文件 然而 类引用并未

  • “require(...)”是常见的 JavaScript 模式还是库函数？

    我通常发现这是 node js 脚本 模块以及 phantomJS casperJS 等中的第一行 我很好奇 这是否是服务器端 javascript SSJS 的常见模式 类似于 include在 C C 中或import在 Java 中

  • 为什么函数声明在不同浏览器中的处理方式不同？

    虽然我在谷歌中找不到对此的引用 但我熟悉这样一个事实 在 javascript 中 全局函数声明在执行任何代码之前都会被解释 换句话说 这工作得很好 f function f 但是 我注意到 chrome 和 firefox 对全局函数声明

  • Rangy：插入符号下的单词（再次）

    我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器 基本上 我需要能够插入人员 标签引用 例如 Twitter Github Facebook 我发现一些人试图实现同样的事情的代码 http jsfiddle net A

  • 如何包装内在组件，保留大部分 Props？

    我想用我自己的 React 功能组件包装一个标准按钮 但我希望新组件的用户能够设置 几乎所有底层按钮的道具 当然 我想保持正确的打字 所以如果 WrappedButton 包含一个button then

  • Next.js：错误：React.Children.only 期望接收单个 React 元素子元素

    我有一个名为Nav inside components目录及其代码如下所示 import Link from next link const Nav gt return div a Home a a About a div export d

  • Socket IO 服务器到服务器

    服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端 并让它加入房间 接收 io sockets in lobby emit 和更多 第一个服务器也在监听连接 消息 嘿 Brad 下面是我的完整 js 应用程序 供参考

  • 嵌套 DIV 的类似斑马的 CSS 样式

    我嵌套了 DIV 元素 但我不知道嵌套的级别 我需要每个都有与其父级不同的背景 创建类似斑马的颜色 我只使用两种背景 深色和白色 效果需要类似于在容器中设置奇数和偶数子级的样式 但在我的例子中 子级是嵌套的 我可以使用每个嵌套元素的规则来做

  • 如何在新窗口中打开图像或pdf文件？

    我有一个 gridview 它包含文件名和文件路径 图像和 pdf 格式文件 其中我使用了模板字段 在该字段下放置了 1 个图像按钮 单击该图像按钮 即 查看 按钮 时 我想在新窗口中打开所选文件 这是我的代码 protected void

  • 如何使用 GreaseMonkey 让浏览器恢复“/”键？

    Lots of web pages seem to use the key for searching I d like to disable that because 100 of the time I want to use to se

  • Angularjs : $locationProvider.hashPrefix("!") ;

    我想将网址显示为 www test com 因为我正在使用 locationProvider hashPrefix 但它显示网址为 www test com 我想 哈希之前而不是哈希之后 Thanks var app angular mod

  • 在 Android Chrome 中隐藏 HTML5 音频/视频通知

    我的网络应用程序上有一个 HTML5 音频元素 在某些时候 我使用以下代码以编程方式停止播放 audioElement pause audioElement currentTime 0 播放音频时 我的 Android 设备 使用 Goog

  • 在 React Web 应用程序中使用 createjs-soundjs

    我想用https www npmjs com package createjs soundjs https www npmjs com package createjs soundjs在 React Web 应用程序上播放声音 我正常安装了

  • 将两个数字相加将它们连接起来而不是计算总和

    我将两个数字相加 但没有得到正确的值 例如 做1 2返回 12 而不是 3 我在这段代码中做错了什么 function myFunction var y document getElementById txt1 value var z do

  • 将 JSON 属性绑定到表单

    我有一个 JSON 对象和一个

随机推荐

  • 使用 awk 遍历文件列表？

    我很陌生awk 但我正在寻找一种方法来迭代目录中的所有文件并执行一个简单的awk命令 我的命令是一个简单的替换 将所有制表符替换为两个空格 awk gsub t print 如何扩展以循环遍历目录并对所有文件执行命令 将文件传递至awk当然

  • spring JSP MVC 和 Thymeleaf MVC 的区别

    Spring JSP MVC 和 Thymeleaf MVC 有什么区别 哪一种是春季网页设计的最佳方式 它们都是 Spring MVC 的视图层 首先 最基本的区别是文件扩展名 jsp html 评论中的布拉尼斯拉夫是对的 JSP不是模板

  • 当匹配查询的所有文档的字段总和超过某个值时，如何触发 elastalert

    当匹配查询的所有文档的字段总和超过某个值时 是否可以触发elastalert 假设每个文档都有一个 价格 值 例如 当最后一天的 价格 值总和超过 200 时 是否可以触发 elastalert 示例文档 type transaction

  • 转换数据以适应正态分布

    我有一个比较容易理解的问题 我有一组数据 我想估计这些数据适合的程度标准正态分布 为此 我从我的代码开始 f p m p hist data 128 f p f p trapz m p f p x th min data 001 max d

  • 在 UIView 外部绘制阴影

    背景 我有一个UIView具有以下属性 阿尔法 1 背景颜色 白色 不透明度 0 35 圆角 阴影 Code 这就是我创建阴影的方法 UIView扩大 self layer masksToBounds false self layer sh

  • 对于iOS healthkit如何保存收缩压和舒张压值？

    这是在健康套件中保存血压数据的代码 HKUnit BPunit HKUnit millimeterOfMercuryUnit HKQuantity BPSysQuantity HKQuantity quantityWithUnit BPun

  • 在 PHP 中向日期添加三个月

    我有一个变量叫做 effectiveDate包含日期2012 03 26 我试图在此日期基础上增加三个月 但没有成功 这是我尝试过的 effectiveDate strtotime 3 months strtotime effectiveD

  • 按上下文获取所有标签以实现 acts-as-taggable-on

    We use https github com mbleigh acts as taggable on https github com mbleigh acts as taggable on对于我们的 Rails 应用程序 我们遇到了问题

  • 如何与 React Test Renderer / Jest 渲染的组件交互

    我正在使用 Jest 和快照测试 我想做的是渲染一个组件ReactTestRenderer 然后模拟单击其中的按钮 然后验证快照 ReactTestRenderer 返回的对象create呼叫有一个getInstance函数允许我直接调用它

  • 不兼容的片段类型

    你好 我在 android 中有一个小应用程序 我在其中使用带导航抽屉的片段作为菜单 但现在我想在用户单击某些内容时在片段对话框弹出窗口中显示 并且出现以下错误 主要活动 private void displayView int posit

  • shell 脚本参数非位置

    有没有办法将非位置参数提供给 shell 脚本 意思是明确指定某种标志 myscript sh value1 value2 myscript sh val1 value1 val2 value2 您可以使用getopts 但我不喜欢它 因为

  • MySQL 错误 1241：操作数应包含 1 列

    我正在尝试将表1中的数据插入表2中 insert into table2 Name Subject student id result select Name Subject student id result from table1 表2

  • 在.Net Framework中使用最新版本的System.Net.Http

    最新版本System Net Http https www nuget org packages System Net Http nuget 上的版本是 4 3 4 但即使是最新的 Net Framework 4 8 也附带了该库的 4 2

  • 拼写检查等统计句子建议模型

    已经有可用的拼写检查模型 可以帮助我们根据经过训练的正确拼写语料库找到建议的正确拼写 是否可以将粒度从字母表增加到 单词 以便我们可以有均匀的短语建议 这样如果输入了错误的短语 那么它应该从正确短语的语料库中建议最接近的正确短语 当然它是从

  • Google 地图信息窗口中的 YouTube 视频

    我正在尝试将 YouTube 视频放入 Google 地图 v3 信息窗口中 它在 Firefox 和 Internet Explorer 中运行良好 It does not在 Safari 和 Chrome 中工作 在这些浏览器中 定位已

  • 在 Activity.onCreate(..) 中显示警报

    我是 Android 新手 这是我的第一个问题 所以请放轻松 是否可以检查 Activity 的 onCreate 内的某些条件并显示 AlertDialog 我在 Oncreate 中匿名创建一个 AlertDialog 并在该实例上调用

  • 使用 R Markdown 的 Beamer 演示

    我正在使用 R Markdown 来制作投影仪演示我对幻灯片水平有疑问 我选择法兰克福主题 该主题允许制定演示计划 标题中的项目符号 我的问题 当我输入 slide level 2 时 我有内容 但没有演示文稿的计划 当我输入 slide

  • 如何从命令行将错误列表（或任何自定义查询）从 TFS 导出到 Excel？

    我需要将错误列表从 Team Foundation Server 导出到 Excel 手动执行此操作很简单 但我需要命令行版本 因为该任务需要自动化 有人知道该怎么做吗 回答你原来的问题 在 TFS 中添加新查询 创建查询并单击 保存 这应

  • 使用 Visual Studio 创建 MSI 并强制所有用户

    我使用 Visual Studio 2015 带有 Visual Studio 安装程序插件 创建了一个安装程序 目标是始终使用相同的本地资源运行应用程序 无论谁登录 因此我们的目标是 CommonAppDataFolder Win10 上

  • 淡出旧元素，淡入新元素

    我是新来反应并尝试过反应动画 http facebook github io react docs animation html 当在 TransitionGroup 中添加或删除元素时 它们非常有用 但是 如果我用类似的元素替换单个元素

热门标签