处理Vue.js转换和动画

      动画和转换可以让您的网站生活，并吸引用户探索。动画和转换是UX和UI设计的一个组成部分。但是，他们很容易出错。在处理列表这样的复杂情况下，依靠本机JavaScript和CSS时几乎不可能推理。每当我向后端开发者询问为什么他们如此激烈地讨厌前端时，他们的反应通常是在“ 动画 ”的某处。

       即使对于那些渴望创造出复杂的微观互动和顺畅的页面转换的人来说，这也不是一件容易的事情。出于性能方面的原因，我们经常需要依赖CSS，即使在大多数JavaScript环境中工作时，也可能难以管理环境中的中断。

       这就是像Vue.js这样的框架介入，把猜测工作和笨拙的setTimeout函数链转换出来的地方。

转换和动画之间的区别

• A transition是单个步骤中要转换的元素上的样式属性的变化。它们通常是纯粹通过CSS处理的。
• 一个animation更复杂。他们通常是多步骤，有时连续运行。动画通常会调用JavaScript来拾取CSS缺少逻辑的地方。

       这可能会令人困惑，因为添加一个类可能是过渡或动画的触发器。但是，进入Vue世界是一个重要的区别，因为它们都有非常不同的方法和工具箱。

 

使用转换

        在页面上实现过渡效果的最简单的方法是通过Vue的<transition>组件。它使事情变得如此简单，几乎感觉就像在作弊。Vue将检测是否有任何CSS动画或转换正在使用，并会自动切换转换的内容上的类，允许一个完美的定时过渡系统和完整的控制。

       第一步是确定我们的范围。我们modal通过例如设置组件name属性来告诉Vue预先设置过渡类。然后触发一个转换，所有你需要做的是使用v-ifor v-show属性来切换内容的可见性。Vue将相应地添加/删除类。

      对于转换有两个“方向”:(enter对于从隐藏到可见leave的元素）和（对于从可见到隐藏的元素）。然后，Vue提供了3个“钩子”，代表转换中的不同时间范围：

• .modal-enter-active/ .modal-leave-active：这些将在整个过渡期间出现，并且应该用于应用您的CSS过渡声明。您还可以声明需要从头到尾应用的样式。
• .modal-enter/ .modal-leave：使用这些类来定义元素在开始转换之前的样子。
• .modal-enter-to/ .modal-leave-to：你可能已经猜到了，这些决定了你想转换的样式，即“完成”状态。

为了使整个过程可视化，请从Vue的文档中查看此图表：

这如何转化为代码？假设我们只是想淡入淡出，把这些东西放在一起看起来就像这样

这可能是你会遇到的最基本的实现。请记住，这个转换系统也可以处理内容更改。例如，你可以对Vue的动态变化做出反应<component>。

每当selectedView更改，旧的组件将滑出左侧，新的将从右侧进入！

列表中的转换

            另一个问题是所有的列表项都需要有一个唯一的key属性。Vue可以跟踪每个项目，并优化其性能。在我们的演示中，我们正在遍历公司名单，每个公司都有唯一的ID。所以我们可以像这样设置我们的列表：
 

          最transition-group让人印象深刻的特性就是Vue如何无缝地处理列表顺序的变化。为此，可以使用额外的转换类.company-move（与active进入和离开类非常类似），这将用于列出正在移动但仍然可见的项目。

 

       在演示中，我分解了一些，以展示如何利用不同的状态来获得更清晰的最终结果。下面是一个简洁而整齐的版本：

使用动画