作者：MattMaribojoc译者：前端小智来源：stackabuse有梦想，有干货，微信搜索【大千世界】追踪这位凌晨还在洗碗的洗碗智慧.本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue过渡和动画是使我们的网站现代化并为网站访问者提供更好的用户体验的好方法。对于开发人员来说幸运的是，Vue动画只需几分钟即可设置。文字主要介绍了Vue元素，使用它来创建一些Vue动画，并学习将它添加到你的项目中的基础知识。首先，我们来看看VueTransition是如何处理条件渲染的。然后，创建您自己的CSS动画样式。最后，我们将了解如何将第三方CSS库与Vue动画一起使用。了解Vue过渡虽然大多数人将过渡视为装饰，但设计良好的过渡可以：抓住并引导用户注意力强调重要信息引导用户浏览页面帮助创建更专业的品牌形象所有这些要点都有助于改善我们的用户体验网站提高了转化率和用户留存率，这是一个双赢的局面。在我们的项目中添加Vue过渡为了适应大多数开发人员，VueJS提供了几种实现过渡的方法：css或动画过渡样式JSHook编辑DOM集成第三方CSS这些方法的难度取决于您现有的知识。什么是元素？过渡元素是一个包装器，可以帮助我们向元素添加过渡功能。它提供了不同的钩子并将类添加到不断变化的元素中，因此我们可以在过渡的不同阶段对它们进行样式设置。enter-from-classenter-active-classenter-to-classleave-from-classleave-active-classleave-to-class这在向代码中添加自定义库时特别有用，我们将在后面解释。...另外，transition元素会发出JS钩子函数，所以我们可以捕获它们并使用JS执行动画。可用的钩子是：before-enter/before-leaveenter/leaveafter-enter/after-leaveenter-cancelled/leave-cancelled然后我们可以在JS中处理它们。beforeEnter(el,done){done()}VueTransition的高级用法以上只是一些基础知识。在项目中，你会遇到比较复杂的场景。这个怎么做？让组件在loading下转场很容易，只需要在transition元素上加上appear属性即可，如下：交替分区选项A
