Shulou(Shulou.com)05/31 Report--

This article mainly introduces WeChat Mini Programs to achieve CSS3 animation drop-down menu effect of the method of related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this WeChat Mini Programs to achieve CSS3 animation drop-down menu effect of the method article will have a harvest, let's take a look at it.

Train of thought

Use the list to store menu items, set a view element on the outside as an outer box, set it to overflow:hidden, and use CSS3 animation to gradually change the height of the outer view element. when the height is 0, the nested list elements are completely hidden, equivalent to the menu closed. When the height of the view element is greater than the height of the list element, it is equivalent to a menu display.

Effect picture

Wxml

The button button is used to trigger the opening and closing of the menu. The menu is not visible until the first_click parameter user clicks the button for the first time, and the state parameter is used to control the opening and closing status of the menu.

History record ▼ 1112222333

Css

Use @ keyframes animation to open and close menu gradients

# box {width: 100%; border-top: 1px solid # ddd; overflow: hidden; height: 0; animation-fill-mode: forwards;} # item_list {background-color: white; width: 100%;} # item_list view {text-align: right; overflow: auto; white-space: nowrap;} @ keyframes slidedown {from {height: 0;} to {height: 240rpx;}} @ keyframes slideup {from {height: 240rpx;} to {height: 0 } .open {animation: slidedown 1s;} .close {animation: slideup 1s;} .hide {display: none;} .show {display: block;}

Js

When the page is loaded, the initial state of the menu is hidden and closed. Once the user clicks the button, the menu is displayed and gradually opened.

Data: {state:false, first_click:false,}, toggle: function () {var list_state = this.data.state, first_state = this.data.first_click; if (! first_state) {this.setData ({first_click: true});} if (list_state) {this.setData ({state:false});} else {this.setData ({state: true}) }} this is the end of the article on "WeChat Mini Programs's method of realizing the drop-down menu effect of CSS3 Animation". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "WeChat Mini Programs's method to achieve the effect of CSS3 animation drop-down menu". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.