Question

我正在尝试为其兄弟declarations: [ TranslatePipe, ], //... providers: [ TranslationProvider ] <p>上的<input>代码制作动画，但它无效。

我已经制作了一个编码器。

我也不想使用Javascript作为解决方案。

https://codepen.io/ItsBrianAgar/pen/YrGVxW?editors=0100

HTML

focus

CSS

<html lang="en"></html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700,900" rel="stylesheet"/>
  <link href="assets/css/main.css" type="text/css" rel="stylesheet"/>
  <title>myCoffee</title>
</head>
<body>
  <main class="appContainer">
    <div class="app">
      <div class="sectionLogin">
        <div class="logo"><img src="assets/images/logo.svg" alt="logo"/></div>
        <div class="inputLogin">
          <div class="textField"></div>
          <div class="textField">
            <p id="username">Username</p>
            <input type="text" name="username"/>
          </div>
          <div class="textField">
            <p id="password">Password</p>
            <input type="password" name="password"/>
          </div>
        </div>
        <div class="btnLogin">
          <button>LOGIN</button>
        </div>
        <div class="btnSignup">
          <button>SIGN UP</button>
        </div>
      </div>
    </div>
  </main>
</body>

Answer 1

它不起作用，因为~选择器以其他方式工作。它选择主主选择器后出现的所有兄弟姐妹。在您的情况下，<p>出现在<input>之前。

要使其正常运行，您应该在html：

中进行一些替换

<div class="textField">
  <input type="text" name="username"/>
  <p id="username">Username</p>
</div>

我知道它可能会破坏布局，但您可以使用position: absolute;来修复它。

Answer 2

要使用+ / ~，p元素必须位于input旁边。

以下是工作演示：

＆＃13;

.box {
padding: 30px;
}
.textField {
position: relative; 
}
input {
padding: 10px; 
width: 200px;
border-color: transparent transparent red transparent;
outline: none;
}
p{
margin: 0;
position: absolute;
bottom: 3px;
transition: all linear 0.25s;
}
input:focus + P {
font-size: 12px;
bottom: 30px;
}

＆＃13;

<div class="box">
<div class="textField">
<input type="text" name="password"/>
 <p id="password">Password</p>
</div>
</div>

＆＃13;

CSS兄弟选择器没有动画

2 个答案: