哈Ha！ 我决定通过将文章翻译成俄语来开始我的活动，这对我本人非常有益。 希望您能派上用场。 我注意到我尝试翻译文学作品，而不是逐字翻译。
首先，我将介绍Hajime Yamasaki
Vukelic撰写的文章
“ Vue.js渲染函数和过渡”的译文。
Vue.js渲染函数和过渡
关于渲染功能的Vue.js文档很差。 对于使用带有渲染功能的JSX的用户，这可能会造成问题。 在本文中，我们将研究如何在这种特定情况下创建过渡。
我在示例中使用了JSX，但是它们都可以使用简单的JavaScript呈现功能，因为JSX只是h（）调用的语法糖。 如果您想进一步了解该主题，请查看
本文 。
过渡一般如何工作
过渡的本质是您具有一个内置的过渡组件，该组件将类分配给已安装（输入）或已卸下（离开）的元素。
皮卡布舞
主要差别：如何确定元件的安装或拆卸位置。 这个问题可以通过几种方式解决。
您可以使用三元运算符实现元素的出现/消失：
render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> }
或将一项替换为另一项：
render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> }
不，我只是在开玩笑。 当然，没有其他参数就不能使用三元运算符来替换此类元素。 但是，有细微差别。 比较算法会确定那里已经有一个元素，因此它不会修复DOM中的问题，而只是将其修复以使其看起来像另一个元素。
如果在替换元素时使用key会更好：
render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> }
如果有钥匙，则两个元素会完全改变（旧的元素被拆除，而新的元素被安装在其位置上），而钥匙则不同。
同样，如果要从同一组件/元素中的另一个组件或元素交换：
render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> }
在上面的示例中，this.subcomponentKey方法将以某种方式计算MyComponent组件的对应密钥。
关键差异
在谈论键时，请记住，更改键时，元素/组件始终会完整显示。 另一方面，只要键保持不变，元素/组件就不会改变。
不要让这让您感到惊讶。 在不小心将密钥添加到几乎所有移动（或应该移动）的事物之前，请仔细考虑该密钥的值。 首先检查没有按键的情况，写下结果，然后添加按键，看看是否可以重复相同的效果。 如果不会更新用户界面，则您可能选择了错误的键值。
添加动画
现在，我们知道如何使元素消失并返回，现在该开始制作动画了。
在最简单的情况下，我们有两个类。 一类始终适用，另一类在装配或拆卸元件/组件时适用。
// my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); }
现在将这些类添加到代码中：
render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> }
这些类（enter-class和leave-to-clas）在
文档中有很好的描述。 在此了解它们。
输入类用作样式的存储库，这些样式在装入元素后立即应用。 此后，立即删除该类。 我们添加过渡以在使用enter-class的时间与不使用enter-class的时间（仅使用.base类）之间创建动画。
班级休假类将在删除项目之前立即应用。 然后Vue.js等待动画完成，然后从DOM树中删除该项目。 同样，我们使用过渡来创建动画。
在我们的示例中，我们使用相同的.out类进入和退出，但是我们可以对两个事件使用不同的类。
结论
希望现在您了解在渲染功能和JSX中使用Vue.js过渡的关键概念。 但是，Vue.js过渡提供了更多功能，例如使用JavaScript连接过渡事件的功能，因此，甚至可以做一些与动画无关的事情（类似于生命周期陷阱）。 我将在此处结束本文，并将实验留给亲爱的读者。
骇客入侵！