这篇文章主要介绍“如何用css的cubic-bezier函数做出动态缓冲效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何用css的cubic-bezier函数做出动态缓冲效果”文章能帮助大家解决问题。

cubic-bezier函数默认接受四个参数，cubic-bezier(x1,y1,x2,y2)，其中y1、y2是可以大于或小于0的，基于此可以做出一些缓冲的过渡效果。

<template><divclass="menu"><divv-for="iteminmenuList"><divclass="menu-item"@mouseover="mouseover($event,item)"@mouseleave="mouseleave">{{item.name}}</div></div></div><transitionname="move"><divid="sub-menu"ref="subMenu"v-show="show"@mousemove="overSub"><divclass="sub-menu-item"v-for="iteminsubMenuList">{{item.name}}</div></div></transition></template><script>import{ref}from‘vue‘;exportdefault{setup(){letmenuList=ref([{name:‘cloud‘,children:[{name:‘cloud1‘},{name:‘cloud2‘}]},{name:‘software‘,children:[{name:‘software1‘},{name:‘software2‘},{name:‘software3‘}]},{name:‘docs‘,children:[{name:‘docs1‘},{name:‘docs2‘}]}]);letsubMenuList=ref([]);letshow=ref(false);return{menuList,subMenuList,show};},methods:{mouseover(e,item){this.subMenuList=item.children;this.$refs.subMenu.style.left=e.target.offsetLeft+‘px‘;this.$refs.subMenu.style.height=`${43*this.subMenuList.length}px`;this.show=true;},mouseleave(){this.show=false;}}};</script><stylescoped>.menu{display:flex;}.menu-item{height:40px;width:fit-content;margin-left:20px;font-size:26px;font-weight:lighter;color:#aaa;cursor:pointer;}#sub-menu{position:absolute;font-size:32px;font-weight:lighter;color:#000;border:solid1px#ccc;padding:15px;border-radius:10px;}.move-enter-active,.move-leave-active{transition:all0.3scubic-bezier(0.175,0.885,0.32,1.275);}</style>

没有用原生的transition属性是因为v-if不支持，所以必须结合vue的transition组件。

其中cubic-bezier(0.175,0.885,0.32,1.275);是提供过渡效果的关键，可以看出整个菜单会有一个缓冲的过渡效果，视觉上也更加具有冲击力。

关于“如何用css的cubic-bezier函数做出动态缓冲效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。