Question

我有一个有趣的情况。

首先，请在此处查看笔CodePen

如您所见，这是<RelativeLayout android:layout_width="match_parent" android:background="@drawable/button_selector" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:layout_marginLeft="10dp" android:layout_height="40dp"> <Button android:id="@+id/button_select" android:layout_width="wrap_content" android:layout_height="30dp" android:text="Select" android:background="#d57200" android:layout_centerInParent="true" android:textSize="18dp" android:textColor="#fff" android:textAllCaps="false"/> </RelativeLayout>的正确动画。

我想要实现的是，动画将从中间传播，而不是从上到下传播。

我也希望在没有JS / jQuery帮助的情况下实现这一目标。

欣赏你的想法：）

line-height

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
}
h1:hover {
  line-height: 60px;
}

Answer 1

只需将此文本包装在包装中，给它一个高度，将文本垂直放在中心位置即可。全页查看。

＆＃13;

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  margin-top: 30px;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
}

h1:hover {
    line-height: 60px;
  }

.wrapper {
  height: 400px;
  display: flex;
  align-items: center;
}

＆＃13;

<div class="wrapper">
  <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni. consectetur adipisicing elit. Corrupti doloribus beatae laboriosam aspernatur magni.</h1>
</div>

＆＃13;

Answer 2

简单，在这种情况下只需使用行高，或者也可以使用flex。唯一的问题是容器的高度，在这种情况下我使用120px，即文本可以扩展的最大高度，你也可以使用高度：100％; <身高> 100vh

hm.get("1").remove("two");

* {
  border: 0;
  margin: 0;
  padding: 0;
}

h1 {
  display:inline-block;
  text-align: center;
  line-height: 30px;
  transition: line-height 0.3s ease-in-out;
  vertical-align:middle;
  
}
h1:hover {
    line-height: 60px;
  }
.container-mod{
  margin-top: 30px;
  height:100vh;
  
}
.container-mod:before{
    content:"";
    vertical-align:middle;
    display: inline-block;
    height:100%;
  }

CSS线高度动画

2 个答案: