如何为移动端搜索点击函数添加动画效果？

Got it, let's spruce up that mobile search toggle with smooth animations! The key issue with your current code is that display: none/block doesn't support CSS transitions, so we'll tweak things a bit to use animatable properties instead. Here are two straightforward approaches:

Option 1: CSS Transitions (Simple & Smooth) #

First, update your CSS to add transition effects to the search form. We'll use opacity and height to create a fade + expand/collapse animation:

/* Default hidden state - keep display:none to avoid layout shift initially */
#searchform {
  display: none;
  opacity: 0;
  height: 0;
  overflow: hidden;
  /* Adjust transition duration/timing to your preference */
  transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
}

/* Active state when the form is shown */
#searchform.active {
  display: block;
  opacity: 1;
  height: auto; /* Or set a fixed height if you know your form's size (e.g., 60px) */
}

Then modify your mobileSearch() function to toggle the active class instead of directly changing display:

function mobileSearch() {
  const searchForm = document.getElementById("searchform");
  searchForm.classList.toggle("active");
}

Your existing icon HTML stays exactly the same:

<span onclick="mobileSearch()" class="flaticon-magnifier-tool search-iconmob hidden-lg hidden-md"> </span>

Option 2: CSS Keyframes (For Custom Animations) #

If you want a more dynamic effect (like a slide-down animation), use CSS keyframes instead:

#searchform {
  display: none;
  opacity: 0;
  transform: translateY(-15px); /* Start slightly above its final position */
}

#searchform.active {
  display: block;
  /* Animate opacity and position over 0.3 seconds */
  animation: slideIn 0.3s ease forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Use the same updated mobileSearch() function from Option 1 here—no extra JS changes needed!

Quick Notes: #

• If your search form has default padding/margin, add those to the hidden state to prevent sudden layout jumps during animation.
• Adjust the transition/animation duration (e.g., 0.3s) to make the effect faster or slower.
• Using classList.toggle() is cleaner than manually checking display states, and it keeps all styling in CSS where it belongs.

内容的提问来源于stack exchange，提问作者Gocha Gochitashvili