时间戳

首页 > 解决方案 > CSS 过渡适用于某些元素，但不适用于其他元素

html - CSS 过渡适用于某些元素，但不适用于其他元素

问题描述

首先，我想保持对 HTML 和 CSS 的新手，所以如果答案很明显，请原谅我。我对我的 CSS 代码现在发生的事情完全感到困惑。我设计了一个登录页面，当用户单击输入元素时，标签文本会向上移动并改变颜色。一切都按预期完美运行。现在我正在使用与登录页面相同的动画制作注册表单以保持一致性。然而，出于某种奇怪的原因，虽然我使用了相同的代码（唯一的区别是位置类型 [使用绝对登录和注册使用相对]，以及更多输入元素），但移动转换根本不起作用。文本仍然改变颜色，标签元素立即向上移动，没有过渡动画。任何关于为什么会发生这种情况的想法将不胜感激。

如果有帮助，我从 youtube 视频中获取了这个想法：https ://www.youtube.com/watch?v=eeHqZeJ9Vqc

所有输入元素都遵循此布局：

.center-card {
  margin: 3vh auto 0 auto;
  width: 30%;
  min-width: 30%;
  height: 85vh;
  background: white;
  border-radius: 10px;
}

.form-wrap {
  margin: 0 auto;
  width: 90%;
  min-width: 90%;
}

.form-wrap form {
  width: 100%;
}

.form-wrap label {
  font-size: 16px;
}

.signup-inputs {
  border-bottom: 2px solid #adadad;
}

.signup-inputs input,
.signup-inputs select {
  width: 100%;
  padding: 0 5px;
  font-size: 16px;
  border: none;
  background: none;
  outline: none;
  position: relative;
  top: 2.3vh;
}

.signup-inputs label {
  position: relative;
  bottom: 1vh;
  left: 0.5vh;
  color: #adadad;
  pointer-events: none;
  /*transform: translateY(-50%);*/
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.inline-spacing {
  width: 45%;
}


/* Container wrap for (decision maker and number of employees) and (email and phone number)*/

.decisionMaker-Employees,
.email-phone {
  display: flex;
  justify-content: space-between;
}

.password-margin {
  margin-bottom: 3vh;
}

.signup-inputs span::before {
  content: '';
  width: 0%;
  height: 0.3vh;
  background: #2691d9;
  position: relative;
  top: 3.8vh;
  display: flex;
  transition: 0.5s;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
}

.signup-inputs input:focus~label,
.signup-inputs input:valid~label,
.signup-inputs select:focus~label,
.signup-inputs select:valid~label {
  top: -4vh;
  color: #2691d9;
}

.signup-inputs input:focus~span::before,
.signup-inputs input:valid~span::before,
.signup-inputs select:focus~span::before,
.signup-inputs select:valid~span::before {
  width: 100%;
}
<div class="center-card">

  <h1>Create an Account</h1>

  <div class="form-wrap">
    <form method="post">

      <!-- Signup Name -->
      <div class="signup-inputs">
        <input type="text" id="name" name="name" required>
        <span></span>
        <label for="name">Name</label>
      </div>

标签： htmlcsscss-animationscss-transitions

解决方案

由于您正在使用，您的注册可能无法正常工作position: relative;

这种类型的定位可能是最令人困惑和误用的。它的真正含义是“相对于自身”。如果您设置位置：相对；在一个元素上，但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的定位，它会与你将其保留为 position: static; 但是如果你给它一些其他的定位属性，比如说，top: 10px;，它就会把它的位置从它通常的位置向下移动 10 个像素。我相信您可以想象，根据元素的常规位置移动元素的能力非常有用。我发现自己多次使用它来排列表单元素，这些元素往往不想按照我想要的方式排列。

设置位置时还会发生另外两件事：相对；在您应该注意的元素上。一是它引入了在该元素上使用 z-index 的能力，这不适用于静态定位的元素。即使您没有设置 z-index 值，该元素现在也会出现在任何其他静态定位元素的顶部。您无法通过在静态定位元素上设置更高的 z-index 值来对抗它。

发生的另一件事是它限制了绝对定位的子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块内。这带来了一些我在这里谈论的强大机会。

因此，也许尝试position: absolute;在注册时使用与登录时相同的方法。

推荐阅读