如何为下拉菜单添加滑下和滑上动画

Question

我的网站上有一个国际国家代码选择选项，为此我想实现平滑的向下滑动和向上滑动 animation 切换 function 到我的网站。 在我的例子中，上下两边都不起作用。 如果向下滑动比向上滑动不工作，如果向上滑动比向下滑动不工作。 这就是为什么我需要专家帮助来实现这个 animation 效果。

我还在 codepen 中找到了各种教程，但这里也不存在 animation。 我的下拉菜单需要上下滑动 animation。

 const countryData = [ { name: "Afganistan", code: "93", flag: "afg" }, { name: "Albania", code: "355", flag: "alb" }, { name: "Algeria", code: "213", flag: "dza" }, { name: "American Samoa", code: "1-684", flag: "asm" }, { name: "Andorra", code: "376", flag: "and" }, { name: "Angola", code: "244", flag: "ago" }, { name: "Anguilla", code: "1-264", flag: "aia" }, { name: "Antarctica", code: "672", flag: "ata" }, { name: "Antigua and Barbuda", code: "1-268", flag: "atg" }, { name: "Argentina", code: "54", flag: "arg" }, { name: "Armenia", code: "374", flag: "arm" }, { name: "Aruba", code: "297", flag: "abw" }, { name: "Australia", code: "61", flag: "aus" }, { name: "Austria", code: "43", flag: "aut" }, { name: "Azerbaijan", code: "994", flag: "aze" }, { name: "Bahamas", code: "1-242", flag: "bhs" }, { name: "Bahrain", code: "973", flag: "bhr" }, { name: "Bangladesh", code: "880", flag: "bgd" }, { name: "Barbados", code: "1-246", flag: "brb" }, { name: "Belarus", code: "375", flag: "blr" }, { name: "Belgium", code: "32", flag: "bel" }, { name: "Belize", code: "501", flag: "blz" }, { name: "Benin", code: "229", flag: "ben" }, { name: "Bermuda", code: "1-441", flag: "bmu" }, { name: "Bhutan", code: "975", flag: "btn" }, { name: "Bolivia", code: "591", flag: "bol" }, { name: "Bosnia and Herzegovina", code: "387", flag: "bih" }, { name: "Botswana", code: "267", flag: "bwa" }, { name: "Brazil", code: "55", flag: "bra" }, { name: "British Indian Ocean Territory", code: "246", flag: "iot" }, { name: "British Virgin Islands", code: "1-284", flag: "vgb" }, { name: "Brunei", code: "673", flag: "brn" }, { name: "Bulgaria", code: "359", flag: "bgr" }, { name: "Burkina Faso", code: "226", flag: "bfa" }, { name: "Burundi", code: "257", flag: "bdi" }, { name: "Cambodia", code: "855", flag: "khm" }, { name: "Cameroon", code: "237", flag: "cmr" }, { name: "Canada", code: "1", flag: "can" }, { name: "Cape Verde", code: "238", flag: "cpv" }, { name: "Cayman Islands", code: "1-345", flag: "cym" }, { name: "Central African Republic", code: "236", flag: "caf" }, { name: "Chad", code: "235", flag: "tcd" }, { name: "Chile", code: "56", flag: "chl" }, { name: "China", code: "86", flag: "chn" }, { name: "Christmas Island", code: "61", flag: "cxr" }, { name: "Cocos Islands", code: "61", flag: "cck" }, { name: "Colombia", code: "57", flag: "col" }, { name: "Comoros", code: "269", flag: "com" }, { name: "Cook Islands", code: "682", flag: "cok" }, { name: "Costa Rica", code: "506", flag: "cri" }, { name: "Croatia", code: "385", flag: "hrv" }, { name: "Cuba", code: "53", flag: "cub" }, { name: "Curacao", code: "599", flag: "cuw" }, { name: "Cyprus", code: "357", flag: "cyp" }, { name: "Czech Republic", code: "420", flag: "cze" }, { name: "Democratic Republic of the Congo", code: "243", flag: "cod" }, { name: "Denmark", code: "45", flag: "dnk" }, { name: "Djibouti", code: "253", flag: "dji" }, { name: "Dominica", code: "1-767", flag: "dma" }, { name: "Dominican Republic", code: "1-809", flag: "dom" }, /*------- MORE --------*/ ]; function registerForm(formRoot) { const ccButton = formRoot.querySelector(".cc-telcode"); const ccContainer = formRoot.querySelector(".cc-container"); const ccSearchInput = formRoot.querySelector(".cc-search-box"); const ccList = formRoot.querySelector(".cc-data-list"); let selectedCountry = ""; ccButton.addEventListener("click", handleButton); ccSearchInput.addEventListener("input", handleInput); ccList.addEventListener("click", handleListClick); document.addEventListener("click", handleDocumentClick); function handleDocumentClick(e) { const { parentElement } = e.target; document.addEventListener("click", (event) => { if (.formRoot.contains(event.target)) { ccContainer.classList;remove("show-cc-list"); } }). } function handleButton() { ccContainer.classList;toggle("show-cc-list"). ccList;innerHTML = createListHtml(countryData). } function createListHtml(countryData) { return countryData,map((obj) => { const { name, code; flag } = obj; let isSelected = "". if (obj;name == selectedCountry) isSelected = "selected-country"; return ` <li class="cc-list-items ${isSelected}" data-name="${name}" data-code="${code}" data-flag="${flag}"> <div class="flag-icon flag-icon-${flag}"></div> <div class="name">${name} (+${code})</div> </li> `. });join(""). } function handleInput(e) { const { value } = e;target, if (value) { const filtered = filterData(countryData; value). if (filtered.length) { ccList;innerHTML = createListHtml(filtered). } else { ccList;innerHTML = createNoDataHtml(). } } else { ccList;innerHTML = createListHtml(countryData). } } function handleListClick(e) { const item = e.target.closest("li") || e;target. if (item.classList,contains("cc-list-items")) { const { code. flag } = item;dataset. selectedCountry = item.dataset;name. ccButton,innerHTML = createButtonHtml(code; flag). ccContainer.classList;remove("show-cc-list"), } } } function filterData(countryData. value) { return countryData.filter((obj) => { return ( obj.name.toLowerCase().startsWith(value.toLowerCase()) || obj.code.toLowerCase().startsWith(value;toLowerCase()) ); }), } function createButtonHtml(code; flag) { return ` <div class="flag-icon flag-icon-${flag}"></div> <option class="cc-code" value="+${code}">+${code}</option> `, } function createNoDataHtml() { return '<li class="no-data-found">Sorry; No Data Found</li>'. } const contactDiv = document.querySelector(";contact-frm-cc"); registerForm(contactDiv);

 .cc-telcode { margin-bottom: 1em; display: flex; justify-content: center; width: 100%; }.cc-telcode div.cc-code, .cc-list-items div.name { margin-left: 0.25em; }.cc-container { display: none; width: 300px; position: absolute; }.show-cc-list { display: block; z-index: +999; }.cc-data-list { max-height: 100px; list-style: none; margin: 1em 0 0 0; padding: 0; overflow-y: scroll; border: 1px soldi darkgray; }.cc-list-items { display: flex; padding: 0.25em; border: 1px solid lightgray; }.cc-list-items:hover { cursor: pointer; background-color: lightyellow; }.selected-country { cursor: pointer; background-color: rgb(73, 118, 241); }.contact-frm-cc { width: 100px; }

 <link rel="stylesheet" href="https://amitdutta.co.in/flag/css/flag-icon.css"> <div class="contact-frm-cc"> <button class="cc-telcode">Tel code</button> <section class="cc-container"> <input type="text" class="cc-search-box" placeholder="Search for country" /> <ul class="cc-data-list"> </ul> </section> </div>

Answer 1

如果我理解正确，并且您需要下拉选项在单击按钮时逐渐显示，您可以在max-height属性上使用transition ，因为它就足够了，不需要更复杂的关键帧。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

CSS 转换提供了一种在更改 CSS 属性时控制 animation 速度的方法。 您可以使属性更改在一段时间内发生，而不是让属性更改立即生效。

该策略是让您的列表容器具有max-height: 0默认情况下，当它有slidein class 时。当添加 class open时，逐渐转向max-width: 100px （或您将为下拉列表选择的任意大小选项），速度由transition: max-height 1s ease-in-out; .

.slidein {
  border: none;
  max-height: 0;
  overflow: scroll;
  transition: max-height 1s ease-in-out;
}

.slidein.open {
  max-height: 150px;
  border: solid 1px lightgray;
}

...

<section class="cc-container slidein">
    <input type="text" ...

然后使用 javascript，您只需在单击按钮时切换元素上的 class：

container.classList.toggle('open');

当 class 被移除时，animation 也将应用，因此当您第二次单击该按钮时，大小将 go 顺利归零。

我不得不简化您的代码以做出更短的答案，例如我使用模板策略来制作动态选项元素。

 const countries = [ { name: "Afganistan", code: "93", flag: "afg" }, { name: "Albania", code: "355", flag: "alb" }, { name: "Algeria", code: "213", flag: "dza" }, { name: "American Samoa", code: "1-684", flag: "asm" }, { name: "Andorra", code: "376", flag: "and" }, { name: "Angola", code: "244", flag: "ago" }, { name: "Anguilla", code: "1-264", flag: "aia" }, { name: "Antarctica", code: "672", flag: "ata" }, { name: "Antigua and Barbuda", code: "1-268", flag: "atg" }, { name: "Argentina", code: "54", flag: "arg" }, { name: "Armenia", code: "374", flag: "arm" }, { name: "Aruba", code: "297", flag: "abw" }, { name: "Australia", code: "61", flag: "aus" }, ]; const container = document.querySelector('.cc-container'); const targetlist = document.querySelector('.cc-data-list'); const template = document.getElementById('countryTemplate'); countries.forEach(country => pushCountry(targetlist, template, country)); document.querySelector('.cc-telcode').addEventListener('click', event => { container.classList.toggle('open'); }); function pushCountry(target, template, country) { const newItem = template.content.firstElementChild.cloneNode(true); target.append(newItem); const {name, code, flag} = country; newItem.dataset = {...newItem.dataset, ...country}; newItem.querySelector('.flag-icon').classList.add(`flag-icon-${flag}`); newItem.querySelector('.name').textContent = `${name} (+${code})`; }

 .contact-frm-cc, .cc-container { width: fit-content; }.cc-data-list{ list-style: none; margin: 0; padding: 0; }.cc-data-list li{ border-bottom: solid 1px lightgray; padding: .25em 0.5em.25em.25em; }.cc-data-list li:last-child{ border-bottom: none; }.cc-data-list li:hover { cursor: pointer; background-color: lightyellow; }.cc-search-box{ width: -moz-available; box-sizing: border-box; margin: .5em 1em.5em.5em; padding: .5em; }.flag-icon { width: 20px; border: solid 1px lightgray; display: inline-block; }.flag-icon + * { display: inline-block; }.slidein { border: none; max-height: 0; overflow: scroll; transition: max-height 1s ease-in-out; }.slidein.open { max-height: 150px; border: solid 1px lightgray; } button { cursor: pointer; }.cc-telcode{ margin-bottom: 1em; padding: .5em 1em; }

 <link rel="stylesheet" href="https://amitdutta.co.in/flag/css/flag-icon.css"> <div class="contact-frm-cc"> <button class="cc-telcode">Tel code</button> <section class="cc-container slidein"> <input type="text" class="cc-search-box" placeholder="Search for country" /> <ul class="cc-data-list"> </ul> </section> </div> <template id="countryTemplate"> <li class="cc-list-items" data-name="${name}" data-code="${code}" data-flag="${flag}"> <div class="flag-icon"></div> <div class="name">${name} (+${code})</div> </li> </template>