我正在学习React + Redux,我不明白做动画的正确方法.让我们举例说明:
例如,我有一个列表,我想删除点击项目.如果我没有动画效果那就非常容易:REMOVE_ITEM点击时调度动作,reducer从商店中删除项目并对重新渲染html做出反应.
让我们添加一个在点击时删除订单项的动画.因此,当用户点击某个项目时,我想要运行删除订单项的奇特效果...... 如何?我可以想到几种方法:
1)点击我调度REMOVE_ITEM动作,然后reducer标记一个项目,如goingToBeDeletedStore,然后反应渲染该元素与一个类,.fancy-dissolve-animation我运行一个计时器来调度第二个动作REMOVE_ITEM_COMPLETED.我不喜欢这个想法,因为它仍然不清楚如何在这里添加JS动画(例如,使用TweenMax),并且我运行JS计时器以在CSS动画结束时重新渲染.听起来不太好.
2)我ITEM_REMOVE_PROGRESS以~30ms的间隔调度动作,并且store保存一些表示当前动画状态的"值".我也不喜欢它,因为它需要我复制商店约120次~2秒的动画(比方说,我想要平滑的60 fps动画),这只是浪费内存.
3)制作动画并REMOVE_ITEM仅在动画结束后发送.这是我能想到的最合适的方式,但我仍然想在用户做出动作后立即更改存储.例如,动画可能需要超过几秒钟,并且REMOVE_ITEM可能与后端同步 - 没有理由等待动画完成后端API调用.
感谢阅读 - 任何建议?
我有一个界面
interface IData {
importantData: string
}
Run Code Online (Sandbox Code Playgroud)
我想isLoading在那里添加标志。如果isLoading = false,则importantData已加载并且肯定必须存在。然而,如果isLoading = true,则importantData可能存在,也可能不存在。
interface ILoadedData extends IData {
isLoading: false
}
interface ILoadingData extends Partial<IData> {
isLoading: true
}
Run Code Online (Sandbox Code Playgroud)
所以,我的最终类型是这些的联合:
type IDataWithLoading = ILoadedData | ILoadingData
Run Code Online (Sandbox Code Playgroud)
如果我尝试它对于布尔文字效果很好
const a:IDataWithLoading = ({ isLoading: false, importantData: 'secret' })
const b:IDataWithLoading = ({ isLoading: false }) // the only error, nice
const c:IDataWithLoading = ({ isLoading: true })
const d:IDataWithLoading = ({ isLoading: true, …Run Code Online (Sandbox Code Playgroud) 我正在尝试在单独的进程中重新缩放一堆 PIXI.js 纹理,以便渲染 UI 线程保持响应。PIXI.js 与这个问题无关,但我想提供更多关于我正在做的事情的背景信息。
不幸的是,我无法让它发挥作用。起初,我尝试生成/分叉一个子进程,但结果证明我只能在父进程和分叉进程之间共享 JSON 编码的数据。真糟糕。
因此,我决定打开一个隐藏的浏览器窗口并在那里重新打包它们。
本质上,我在渲染过程中执行此操作:
// Start packing ... Say, urls.length > 1000, so it's quite a lot!
const textureArray = urls.map((url, i) => {
// get the texture (from cache, sync operation) + scale it
const texture = PIXI.Texture.fromImage(url, undefined, undefined, 0.3);
return texture;
});
// log data in the "hidden" window (I made it visible to access the logs, but it doesn't matter)
console.log("Done!")
console.log(textureArray)
// send to main process
ipcRenderer.send('textures', textureArray) …Run Code Online (Sandbox Code Playgroud) 如何从自动完成中排除某些类,而不是从项目中排除?
我正在尝试使用starling库开发flash.问题是IDE总是建议我一个内置类,我可能不想使用它,即使我导入另一个类.
http://monosnap.com/image/7VRQpIhqIPRK2wgBKp41GOU9i
我试图在设置 - >编辑器 - >自动导入中排除,但它对自动完成没有任何影响.也许我可以重新排序自动完成建议,将库类放在最顶层?我正在使用想法12.0.4
我得到了桌子,我需要改变一些东西.我想通过ajax执行此操作:用户单击"更改"按钮,某些字段转换为可编辑,然后用户可以保存它.代码非常简单:
$(".edit_button").click(function(event){
event.preventDefault();
var trContainer = $(this).closest('tr');
trContainer.replaceWith(content);
});
Run Code Online (Sandbox Code Playgroud)
在原始代码中,我通过$ .GET下载页面,然后将其存储在'content'变量中.结构是(简化):
<tr>
<form>
<td></td> // -- note, <td> are inside of <form>
<td></td>
</form>
</tr>
Run Code Online (Sandbox Code Playgroud)
所以,我希望表格行会改变.它正在改变!...但问题是,加载元素的DOM被破坏了.一切都抛出了表单标签.我使用谷歌Chrome控制台观看DOM,我看到被替换的DOM看起来像(简化)
<tr>
<form></form> // -- here, why <form> is empty?
<td></td>
<td></td>
</tr>
Run Code Online (Sandbox Code Playgroud)
所以,我的输入标签没有包装在表单中.
我建立简约的例子,检查出来.单击"更改",然后观察DOM并将其与内容字符串进行比较.
javascript ×2
animation ×1
electron ×1
flux ×1
jquery ×1
pixi.js ×1
react-redux ×1
reactjs ×1
redux ×1
typescript ×1