Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use css's cubic-bezier function to make dynamic buffering effect". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use css's cubic-bezier function to make dynamic buffering effect" can help you solve the problem.

The cubic-bezier function accepts four parameters by default, cubic-bezier (x1Magi y1gx2jiny2), in which y1 and y2 can be greater than or less than 0, based on which some buffering transition effects can be made.

{{item.name}} {{item.name}} import {ref} from 'vue' Export default {setup () {let menuList = ref ([{name: 'cloud', children: [{name:' cloud1'}) {name: 'cloud2'}]}, {name:' software', children: [{name: 'software1'} {name: 'software2'}, {name:' software3'}]}, {name: 'docs' Children: [{name: 'docs1'}, {name:' docs2'}]]) Let subMenuList = ref ([]); let show = 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;}}; .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: solid 1px # ccc; padding: 15px; border-radius: 10px;} .move-enter-active,.move-leave-active {transition: all 0.3s cubic-bezier (0.175, 0.885, 0.32, 1.275);}

The native transition attribute is not used because v-if does not support it, so you must combine the transition component of vue.

Among them, cubic-bezier (0.175, 0.885, 0.32, 1.275); is the key to provide the transition effect, you can see that the whole menu will have a buffer transition effect, but also more visually impacting.

This is the end of the introduction to "how to use css's cubic-bezier function to make a dynamic buffering effect". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.