当前位置: 首页 > 科技观察

通过示例了解Vue过渡和动画

时间:2023-03-22 17:13:03 科技观察

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元素还会发出JShook函数,我们可以catch它们,用JS来执行动画.可用的钩子是:before-enter/before-leaveenter/leaveafter-enter/after-leaveenter-cancelled/leave-cancelled然后我们可以在JS中处理它们。beforeEnter(el,done){done()}VueTransition的高级用法以上只是一些基础知识。在项目中,你会遇到比较复杂的场景。这个怎么做?让组件在loading下transition很简单就可以实现,只需要给transition元素加上appear属性即可,如下图:...多个元素之间的Transition假设有两个这样的交替div。OptionA

OptionB
我们要做的是将它们包装在transition中,这样过渡样式将适用于两者。要使代码按我们希望的方式工作,需要注意一些事项:绝对定位元素当Vue在两个元素之间转换时,它有时会同时显示两个元素并进行进/出转换。如果您想要平滑的效果,您可能希望将它们完全放在彼此之上。否则,当元素被添加到DOM或从DOM中删除时,它们可能会在这里和那里跳来跳去。2.如果元素相同,必须给组件添加key属性如果元素相同,Vue会尝试优化内容,只替换元素的内容。根据文档,如果您在多个元素之间转换,最好始终添加密钥。改变过渡时间Vue可以检测到过渡/动画何时结束,但是如果我们想设置确切的持续时间,我们可以通过duration属性来设置。我们可以为进入和离开转换传递一个值,或者一个具有两个值的对象。.........动态组件之间的转换我们都你所要做的就是将你的动态组件包装在一个过渡元素中。创建可重用的过渡组件在开发过程中,尝试设计可重用的组件是一个好习惯。封装一个可重用的transition很简单,在transition中放一个slot,如下图:担心为每个组件添加过渡样式、名称和所有内容,只需使用此组件即可。到目前为止,我们已经了解了元素,现在我们可以用它来制作动画了。创建第一个动画接下来我们添加一个按钮,通过切换变量的值来切换元素的显示。Toggle设置元素的条件渲染后,我们使用两个类来设置动画样式:rotate-enter-active和rotate-leave-active,因为我们将过渡命名为旋转。一种技巧是对离开和进入使用相同的动画,但方向相反。@keyframesrotate{0%{opacity:0;transform:scale(0)rotate(-180deg);}100%{opacity:1;transform:scale(1)rotate(0deg);}}.rotate-enter-active{animation:rotate0.2s;}.rotate-leave-active{animation:rotate0.2sreverse;}现在,当我们的组件被切换时,我们应该看到这样的东西。使用第三方库假设我们不想自己编写所有CSS动画。有很多很棒的CSS动画库可以很容易地合并到VueJS动画中。在第一个示例中,我们只是使用了元素生成的默认类名,但我们可以做的是将这些值覆盖为我们想要的任何类,在本例中它将是CSS库中的类名。对于我们的示例,我们使用[Animate.css](https://daneden.github.io/animate.css/)这个动画库,我们只需要将CDN链接添加到我们的index.html文件中。//index.html现在,在我们的元素,我们可以使用enter-active-class和leave-active-class属性将转换连接到Animate.js。...超级简单,运行效果如下:~完成,我是前端小智,咱们去搬砖,咱们去下一期看!添加一名作者