我可以在过渡时应用 align-self 吗？

Question

我可以在转换时应用 align-self 吗？？

如你所见，当我将鼠标悬停在 .wrap 上时

div:nth-of-type(2) {
    align-self: flex-start;

}

 div:nth-of-type(4) {
        align-self: flex-end;
   }

将更改为align-self: flex-center;

我已尝试在 .wrap div:nth-of-type(2) 和 .wrap div:nth-of-type(4) 上执行 transition: All 2s，但它不起作用。我希望制作一个慢速动画，但它似乎不起作用。我读过一篇 post，上面写着 Flexbox align-self property not transitioning?。所以我不能在转换时应用 align-self？

.wrap {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.wrap div {
  height: 100px;
  width: 100px;
  border: 3px solid black;
  background-color: pink;
  transition: align-self 9s;
}
.wrap div:nth-of-type(2) {
  align-self: flex-start;
}
.wrap div:nth-of-type(4) {
  align-self: flex-end;
}

.wrap:hover div {
  align-self: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>A Great Demo on CodePen</title>
</head>
<body>
 <div class="wrap d-flex align-items-center justify-content-md-center">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

Answer 1

因为您使用的是固定高度，请考虑边距：

.wrap {
  height: 300px;
  width: 600px;
  margin: 0 auto;
}
.wrap div {
  height: 100px;
  width: 100px;
  border: 3px solid black;
  background-color: pink;
  transition: margin 1s;
}
.wrap div:nth-of-type(2) {
  margin-bottom:200px
}
.wrap div:nth-of-type(4) {
  margin-top:200px
}

.wrap:hover div {
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
  <title>A Great Demo on CodePen</title>
</head>
<body>
 <div class="wrap d-flex align-items-center justify-content-md-center">
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>
 </div>
  
  
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
</body>
</html>

我可以在过渡时应用 align-self 吗？

Can I apply align-self on transition?

html

css

animation

transactions

flexbox