小编shl*_*jin的帖子

Redux/Flux(带ReactJS)和动画

我正在学习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调用.

感谢阅读 - 任何建议?

animation flux reactjs redux react-redux

7
推荐指数
1
解决办法
2127
查看次数

Typescript:如何使布尔值与可区分的真/假联合对一起使用?

我有一个界面

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)

typescript

6
推荐指数
1
解决办法
4545
查看次数

Electron:使用 IPC(或其他任何东西)共享 DOM 数据(例如发送 img 或 canvas)

我正在尝试在单独的进程中重新缩放一堆 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)

javascript pixi.js electron

5
推荐指数
0
解决办法
369
查看次数

JetBrains Idea:从自动完成中排除包和类

如何从自动完成中排除某些类,而不是从项目中排除?

我正在尝试使用starling库开发flash.问题是IDE总是建议我一个内置类,我可能不想使用它,即使我导入另一个类.

http://monosnap.com/image/7VRQpIhqIPRK2wgBKp41GOU9i

我试图在设置 - >编辑器 - >自动导入中排除,但它对自动完成没有任何影响.也许我可以重新排序自动完成建议,将库类放在最顶层?我正在使用想法12.0.4

intellij-idea

4
推荐指数
1
解决办法
819
查看次数

jQuery bug:replaceWIth/html破坏了我的DOM(所有标签都超出了表单标签)

我得到了桌子,我需要改变一些东西.我想通过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并将其与内容字符串进行比较.

http://jsfiddle.net/Es8fQ/3/

javascript jquery

1
推荐指数
1
解决办法
134
查看次数