下拉动画
HTML/CSS
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body,p,ul { margin: 0; padding: 0; } body { background-color: #0c9; color: #333; } .content { padding-top: 5%; } .content .select { width: 300px; height: 40px; margin: 0 auto; font-family: "Microsoft Yahei"; font-size: 16px; background-color: #fff; position: relative; } /*transform(缩放、旋转、平移)，显示的是最终效果，没有动画过程*/ /*transition是对元素本身的属性(比如：width、height)设置动画效果*/ .content .select:after { content: ''; display: block; width: 10px; height: 10px; border-left: 1px #ccc solid; border-bottom: 1px #ccc solid; position: absolute; top: 11px; right: 12px; transform: rotate(-45deg); transition: transform .3 ease-out,top .3s ease-out; } .content .select p { padding: 0 15px; line-height: 40px; cursor: pointer; } /*设置下拉框收起时的高度过渡动画*/ .content .select ul { list-style-type: none; background-color: #fff; width: 100%; overflow-y: auto; position: absolute; top: 40px; left: 0; max-height: 0; transition: max-height .3s ease-out; } .content .select ul li { padding: 0 15px; line-height: 40px; cursor: pointer; } .content .select ul li:hover { background-color: #e0e0e0; } .content .select ul li.selected { background-color: #39f; color: #fff; } /*下拉框展开时调用动画slide-down*/ /*transform-origin设置缩放下拉框的基点位置*/ .content .select.open ul { max-height: 250px; -webkit-animation: slide-down .5s ease-in; transition: max-height .3s ease-in; transform-origin: 50% 0; } /*设置展开时下拉箭头的旋转动画*/ .content .select.open:after { transform: rotate(-225deg); top: 18px; transition: all .3s ease-in-out; } /*为下拉框展开时添加名称为slide-down的关键帧动画*/ @-webkit-keyframes slide-down{ 0%{transform: scale(1,0);} 25%{transform: scale(1,1.2);} 50%{transform: scale(1,0.85);} 75%{transform: scale(1,1.05);} 100%{transform: scale(1,1);} } </style> </head> <body> <div class="content"> <div class="select"> <p>所有选项</p> <ul> <li data-value="所有选项" class="selected">所有选项</li> <li data-value="html">html</li> <li data-value="css">css</li> <li data-value="jQuery">jQuery</li> <li data-value="javascript">javascript</li> </ul> </div> </div> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(document).ready(function(){ //点击P标签切换下拉框 $('.select > p').on('click', function(event) { $('.select').toggleClass('open'); event.stopPropagation(); }); //点击li标签,赋值、切换下拉框、给选中的li标签添加选中样式同级元素移除选中样式、阻止事件冒泡 $('.select ul li').on('click',function(event){ var _this = $(this); $('.select p').text(_this.attr('data-value')); $('.select').toggleClass('open'); _this.addClass('selected').siblings().removeClass('selected'); event.stopPropagation(); }) //点击除下拉框的其它地方，收起下拉框 $(document).on('click',function(){ $('.select').removeClass('open'); }) }); </script> </body> </html>
React
.
