Html 如何修复单击CSS时的过渡动画

我使用搜索栏，我想让它变得更好，但出于某种原因，过渡动画不适合我，我尝试使用一些方法，但只有

动画css

是帮助示例：

.active {
    width: 100%;
    outline: none !important;
    z-index: 901;
    border: 1px solid #30a161 !important;
    animation: animateRight .6s ease-in-out;
}
@-webkit-keyframes animateRight {
    0% {
        width: 100px;
    }

    100% {
        width: 100%;
    }
}

但过渡方法对我来说更好，所以我想要的是，我有动画隐藏体，动画关闭输入搜索（打开动画我有）可能更好的解决方案，移动到过渡

.search_modal {
    position: absolute;
    top: -50px;
    left: 0;
    transition: top 1s ease; // here should be animation
}

---

所以我想要2个动画，第一个是当添加class时；s移动到顶部的-50，再次关闭时需要动画，并输入打开和关闭。

在转换之前，需要在元素上放置转换属性，并使转换类更具体。下面的狙击手应该可以做到这一点

header .search_container {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  margin-right: 1rem;
  z-index: 1024;
  top: 0;
  transition: top 1s ease; //Add it here
}

header .search_container.search_modal {
  top: -50px;
  left: 0;
}

---

如果希望在单击时运行动画，则应仅附加在单击时添加

动画

属性的类。而且，你分享的东西是巨大的：试着分享一个最小的、具体的和可验证的例子。它包含大量不必要和不相关的标记和样式。@Terry我刚刚修复了JSFIDLE，您能提供一些示例吗？