Question

我正在尝试实现向上滑动动画，其中行可以有4/2/1列。每列都有图像，标题和说明。所有这些都可以是可变大小，因此我使用flex来保持每列的大小相等。标题完全显示，但只显示第一行描述并隐藏休息。（我无法找到正确对齐描述的方法）

当您将鼠标悬停在某列上时，我希望标题和说明向上滑动显示整个说明的图像。如果描述更长，则隐藏其余部分。主要要求是在悬停时柱的高度不应改变。

这是我创建的小提琴：https://jsfiddle.net/hbnkfmcr/3/

.row {
  display: flex;
  width: 400px;
}
.col {
  border: 1px solid black;
  margin-right: 5px;
  justify-content: center;
}
.label {
  background-color: red;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.label p {
  line-height: 14px;
  max-height: 14px;
  overflow: hidden;
}
.col:hover p {
  max-height: 100%;
}

<div class="row">
  <div class="col">
    <div class="container">
      <div class="image">
        <img src="http://www.hondahookup.com/images/100x100.jpg">
      </div>
      <div class="label">
        <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Long Title Here
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="container">
            <div class="image">
                <img src="http://www.hondahookup.com/images/100x100.jpg">
            </div>
            <div class="label">
                <h4>Title
                    </h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
            </div>
        </div>
    </div>
</div>

我愿意使用JavaScript，只要它是Angular 2.感谢提前。

Answer 1

将标签文字放到指定高度的另一个div：

.label-text{
  height:50px
}

<div class="label">
    <div class=label-text><h4>Title</h1></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>

https://jsfiddle.net/hbnkfmcr/7/

Answer 2

仅限CSS的解决方案对您当前拥有的内容进行最小的更改（将这些声明添加到样式文件中）：

.col:hover .image {
  height: 0;
  overflow: hidden;
}

.col:hover .label, .col:hover .container {
  height: 100%;
}

.col:hover p {
  overflow: visible;
}

行动中：

https://jsfiddle.net/hbnkfmcr/8/

CSS动画在父级上滑动子元素

2 个答案: