Easy-to-understandandeasy-to-understand-easy-to-usetransition-groupfunctionalreusecomponent提供了多种在插入、更新或删除DOM时应用过渡效果的不同方式.Vue提供的和封装组件可以包裹在我们需要添加进入/退出过渡的元素和组件之外。但是，这两个组件只是提供了一个外包装骨架，具有可配置的效果。如果我们想在我们的组件上复用一些常用的过渡动画效果，我们只能一次又一次地这样做。它是在过渡和过渡组上配置的吗？不，即使我们想这样做，Vue也不希望我们这样做。官方文档中“Transition&Animation>Enter/Leave&ListTransition>ReusableTransition”一章提到：TocreateareusableWithtransitioncomponents,Allyouneededtodoismakeor根组件，并将所有子组件放入其中。功能组件更适合这项任务。ok，这就是我们今天的主题，如何制作一个可复用的功能组件。嗯？官网上不是有吗？是的，但它们是直接用功能制作的组件。用纯代码创建组件对每个人都不是很友好。能不能有看起来直观的SFC（SingleFileComponent）？所以我今天做的是用SFC做的可复用的功能组件~~注：本文使用的是Vue2.x的版本，以后的朋友可以自行迁移到3.x~~为什么是functional写成功能组件的组件？首先，做一个必要的说明。为什么对功能组件使用更好？首先，从业务的角度来说，我们的transition组件不需要关心它的子元素，也不需要给子元素传递任何属性。它是一个全心全意为子元素提供过渡的组件：当子元素出现时，会触发一个过渡钩子。显示进入场景的过渡效果；当有子元素变化时，提供从旧位置移动到新位置的过渡动画效果；当子元素消失时，显示退出效果。所以它不需要任何状态。如果一个组件不需要状态，我们可以考虑把它写成一个无状态的函数式组件。在Vue2.x中，对函数式组件进行了一定的性能优化，初始化速度比Stateful组件要快很多。这也是我们将复用的写成功能组件的主要原因。但是在下面你会发现编写功能组件的另一个原因。功能组件怎么写，官方文档已经写的很清楚了。我不会谈论纯代码。这不是我们今天要关注的内容，先略过；在单文件组件上写函数式组件就像在template标签上写functional一样简单，变成：就很简单了！另外，所有传入的props都可以直接在模板上访问，不需要在script标签的object上声明；如果你没有任何需要定义或额外配置的东西，甚至脚本标签也可以省略！就像这样：{{props.title}}
上面是最简单的函数式组件，写起来太容易了吧！当然，当你需要计算props中的属性时，你还是可以写script标签。例如，您需要对文本进行一些转换：{{$options.coverTitle(props.title)}}
这时候你可以使用$options来访问你定义对象的script标签。或者你想绑定一些简单的事件：{alert('这是标题');}}都是可以的。不过需要注意的是，脚本对象中的代码并没有this，也无法访问文档中提到的context中的字段。所以这就是我们使用功能组件的原因，因为它太简单了！开始工作，开始工作！首先，确认需求。我们需要制作一个包含各种转场效果的组件，然后我们就可以根据外部传入的参数来定制我们需要的效果。就这么简单！让我们先将写入我们的功能组件！外传输入的effectName属性直接绑定到就搞定了！完毕！啊，等等！不是这样的，听我解释！这只是一个例子！不要关闭浏览器页面！当然，我们要复用的转场效果当然不是这么简单的，所以我们必须做一些复杂的事情才有复用的价值，所以我们要做这个效果：按顺序进入的效果看起来复杂吗？！但是使用可以非常简单地完成！我们继续写吧！官网上也有类似效果的例子。思路是利用的JavaScripthook，结合data属性，获取节点的index，然后进行相应的延迟渲染。动画是使用Velocity.js编写的。我们也可以试试。上面说了一些方法可以定义在script标签中，然后在模板上使用$options可以访问到，所以我们可以这样写：我们这里写入口效果，其他效果一样.然后就可以在这两个函数里面写效果了，先写beforeEnter:beforeEnter设置元素进入前的样式状态，然后记得设置transition属性，这样会有过渡效果。接下来写回车效果，我们希望进入后是这样的状态：漂亮又简单！但是，这样写是没有效果的。不知道为什么（是的，我没有写文档，也没有想过），但是done回调函数在只使用JavaScripthooks的时候必须可用，不能同步调用。同步调用将失去作用。它需要异步完成，所以我们添加一点延迟来执行这段代码：这样过渡效果就生效了~~但这不是我们想要的效果。这是同时进入的效果，不是顺序进入的效果，所以我们的问题来了：官方文档中的效果是在使用v-for的同时渲染到dom元素的data属性赋值的index集合中的子元素，所以我们不知道我们的过渡组将包含多少个子元素，我们应该如何知道它们在集合中的顺序？如果您将它们视为vue的组件，我们可能不知道，但是如果我们把它们看成dom节点呢？只要知道子节点前面有多少个兄弟节点，难道不知道自己排在第几？于是写了一个很简单的辅助函数：functiongetDomNodeIndex(el){letnode=el;让索引=0；while(node.previousSibling){//继续访问前一个兄弟节点index+=1;node=node.previousSibling;}returnindex;}所以我们的组件可以这样写："div"class="transition-group-container">这样就完成了我们的一个效果！为了进一步提高复用性，我们的第一个效果已经写好了，但是我们还不能满足于此。既然可以从左边滑入，那我们是不是也可以从右边、顶部、底部滑入呢？？既然可以一个一个滑进去，那你是不是也可以从左、右、上、下滑进去呢？既然可以滑入，是不是也可以写其他效果？好吧，慢慢来，接下来我会教大家进一步提高这个组件复用性的技巧。上面说了，我们是功能组件，那么根据从外部传入的属性形成不同的转场效果是我们接下来要攻克的。问题。先提一下函数式组件的一个坑，就是$options上的方法不能动态绑定到模板上。这可能是Vue为了提高函数式组件的渲染效率而做出的一个举措，但是对于我们来说还是有点不方便。具体来说：这里尝试使用通过props传入的animateName属性来动态绑定传入的JavaScripthook，但是并没有工作。这样，我们就少走弯路。如何绕过这个限制？众所周知，在Vue模板中的v-bind和v-on指令中可以编写一些简单的js代码来实现简单的功能，所以我们可以在这里这样做：$options[props.animateType].beforeEnter(el)"v-on:enter="(el,done)=>$options[props.animateType].enter(el,done)"tag="div"class="transition-group-container">这样我们就可以巧妙的绕过不能动态绑定方法的限制~~现在我们可以在组件中多定义几个转场效果函数了：$options[props.animateType].beforeEnter(el)"v-on:enter="(el,done)=>$options[props.animateType].enter(el,done)"tag="div"class="transition-group-container">好了，一个好用的transition-group功能复用组件就这样写出来了，上面就是全部源码，非常好用简单！参考：Vue.js本文为原创，未经授权不得转载
