| 【Vue】transition让你的v | 您所在的位置：网站首页 › 渲染动画时间 › 【Vue】transition让你的v |
【Vue】transition让你的v
|
【Vue】transition让你的v-if和v-show有个美美的过渡与动画
博客说明
文章所涉及的部分资料来自互联网整理，当然还有自己个人的总结和看法，分享的目的在于共建社区和巩固自己。引用的资料如有侵权，请联系本人删除！幸好我在，感谢你来！ 说明产品说：要你在这个这个显示的时候，那个不要显示，但是怎么突然就没了，这样用户会不会觉得这是个Bug？ Bug：？？？ 其实这个是我们在vue中最平常使用的v-if和v-show指令。 生硬的业务场景切换，让产品感觉还可以优化的错觉 那么就再来优化一下！加个动画？ 过渡动画当然先看看官网的说法，地址 动画案例主要是一个文字的渐变的过程动画。 代码 DOCTYPE html> Vue过渡动画 .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter-to, .fade-leave-to { opacity: 0 } 点我 看我 var vm = new Vue({ el: '#container', data: { show: true, styleText :{ styleText: '30px', color: 'red' } }, methods : { } });效果
注意v是代替我们在transition的name属性 例如 hello // css .plus-enter { background: red; }参数列表 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。然后发现官方的文档里面写了有九个class 那么缺少的也发出来吧，以下这三个用的不多，有要使用的小伙伴可以试试哈！ v-appear：定义在初始渲染时的开始状态。v-appear-active：定义初始渲染时的状态。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-appear-to: 定义初始渲染时的结束状态。 配合动画库自己手写的动画效果难免费劲，不如别人写的动画库，那么能偷个懒吗？ 能！ 两个优秀的动画库可以搭配动画库使用，推荐两个动画库animate.css与vivify.css animate.css
vivify.css
以上就是两个动画库，大家有兴趣可以去看看 通过自定义class使用animate.css的动画库结合使用 好看呀 通过动画直接使用通过动画参数，在animation中使用动画效果。 // css .fade-box-leave-to { animation: bounceOutRight 0.8s; } 事件钩子🪝 JavaScript钩子 before-enterbefore-leavebefore-appearenterleaveappearafter-enterafter-leaveafter-appearenter-cancelledleave-cancelled (v-show only)appear-cancelled当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。 案例 hello // javascript beforeEnter: function (el) { console.log(el) }, enter: function (el, done) { console.log(el) done() }, 小结Vue的v-if和v-show也还是有许多可玩性的，transition这个组件看看我们代码中有好好的使用到了吗？能否给业务带来帮助呢？ 感谢万能的网络 菜鸟教程 以及勤劳的自己，个人博客，GitHub学习，GitHub 公众号【归子莫】，小程序【小归博客】 如果你感觉对你有帮助的话，不妨给我点赞👍吧，持续关注也行哈！ |
【本文地址】
公司简介
联系我们