使用CSS从下至上对div进行动画处理

时间：2019-04-02 00:31:04

标签： html css

我需要为从下到上的div设置动画。 这种情况： 我有一个缩略图，其中包含电影的标题和描述。我想隐藏说明，仅在用户将鼠标悬停在其上时显示。

我尝试调整容器的高度，但将值设置为“自动”时，您无法设置其动画效果，并且由于每个电影的标题可能会有所不同，因此我无法提供具体的大小。 众所周知，您无法使用“底部”和“顶部”属性从底部到顶部进行动画处理。

这是html：

<div class="thumbnail-component">
  <img class="thumbnail-component__background" src="background.jpg" alt="">
  <div class="thumbnail-component__gradient"></div>
  <div class="text">

    <div class="text__content">
        <p class="text__title">The movie title</p>
        <div class="text__separator"></div>
        <p class="text__description">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p class="text__author">Published by Author</p>
    </div>
</div>

这是我要完成的工作的图像：

https://imgur.com/Ddkj5oI

老实说，我完全迷路了，我想我尝试了我所知道的一切。 对不起，我英语不太好。

3 个答案:

答案 0 :(得分：2)

完全灵活且响应迅速
没有硬编码或任意高度，不涉及JS。

On hover show card description using CSS

基本上，

  • 将标题悬停为-100%时，将标题翻译为0
  • 将标题和内容都包装到DIV中（即：.anim）
  • 将Y .anim转换为+100%，然后将其悬停为0动画

在整个页面中打开示例以查看发生的情况及其工作方式：

/*QuickReset*/*{margin:0;box-sizing:border-box;}

.thumb {
  width: 140px;
  background: #eee;
}

.anim {
  transition: 0.5s;
  transform: translateY(100%);
}

.title {
  color: red;
  transition: 0.5s;
  transform: translateY(-100%);
}

.author {
  color: blue;
}

/* ANIMATE */

.thumb:hover .anim,
.thumb:hover .title {
  transform: translateY(0);
}
<div class="thumb">
  <div class="anim">
    <div class="title">The movie even longer title</div>
    <div class="description">
      Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
    </div>
  </div>
  <div class="author">Published by super long some Author</div>
</div>

Flexbox网格！

概念的真实案例示例：

/*QuickReset*/

* {
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%
}

body {
  min-height: 100%;
  font: 14px/1.4 sans-serif;
}

.grid-3 {
  display: flex;
  flex-flow: row wrap;
}

.thumb {
  display: flex;
  flex-flow: column nowrap;
  position: relative;
  overflow: hidden;
  width: 33.333%;
  color: #fff;
}

.thumb-gradient,
.thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.thumb-gradient {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.56) 100%);
}

.thumb-anim {
  margin-top: auto;  /* pushes all content to bottom */
  position: relative;
  transition: 0.5s;
  transform: translateY(100%);
}

.thumb-title {
  text-transform: uppercase;
  padding: 20px;
  transition: 0.5s;
  transform: translateY(-100%);
}

.thumb-description {
  padding: 10px 20px;
  transition: 0.5s;
  opacity: 0;
  flex: 1;
}

.thumb-author {
  padding: 20px;
  position: relative;
}


/* ANIMATE */

.thumb:hover .thumb-anim {
  transform: translateY(0);
}

.thumb:hover .thumb-title {
  transform: translateY(0%);
}

.thumb:hover .thumb-description {
  opacity: 1;
}
<div class="grid-3">

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/300/300" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title</h3>
      <p class="thumb-description">
        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      </p>
    </div>
    <div class="thumb-author">Published by super long some Author</div>
  </div>

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/400/300" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title</h3>
      <p class="thumb-description">
        The row heights are dictated by the tallest in the horizontal group
      </p>
    </div>
    <div class="thumb-author">Published</div>
  </div>

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/230/300" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title a super long title here</h3>
      <p class="thumb-description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus facilis beatae, numquam aliquam eveniet. Iure porro provident itaque hic quae tempora. Quaerat doloribus dolore facilis similique, soluta asperiores quas sapiente.
      </p>
    </div>
    <div class="thumb-author">Published by super long some Author</div>
  </div>

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/270/300" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title</h3>
      <p class="thumb-description">
        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      </p>
    </div>
    <div class="thumb-author">Published by super long some Author</div>
  </div>

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/250/370" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title</h3>
      <p class="thumb-description">
        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      </p>
    </div>
    <div class="thumb-author">Yep. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate sequi aspernatur cumque saepe incidunt enim, nihil dolores ipsam numquam architecto velit labore quod laboriosam aliquam distinctio tempora unde ad totam.</div>
  </div>

  <div class="thumb">
    <img class="thumb-img" src="http://placekitten.com/290/340" alt="Catz!">
    <div class="thumb-gradient"></div>
    <div class="thumb-anim">
      <h3 class="thumb-title">The movie title</h3>
      <p class="thumb-description">
        Text lenghts of Title and Author or even Description do not matter. They will all perfectly accommodate into .thumb on hover
      </p>
    </div>
    <div class="thumb-author">Published by super long some Author</div>
  </div>

</div>

答案 1 :(得分：0)

使用CSS转换非常容易... 

.thumbnail-component {
  width: 240px;
  border: 1px solid red;
  overflow: hidden;
  cursor: pointer;
}

.thumbnail-component .text {
  display: inline-block;
  position: relative;
  text-align: center;
  transform: translateY(70%);
  transition: all 1s ease;
}

.thumbnail-component:hover .text {
  transform: translateY(0%);
}
<div class="thumbnail-component">
  <img class="thumbnail-component__background" src="background.jpg" alt="">
  <div class="thumbnail-component__gradient"></div>
  <div class="text">

    <div class="text__content">
      <p class="text__title">The movie author</p>
      <div class="text__separator"></div>
      <p class="text__description">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
      <p class="text__author">Published by Author</p>
    </div>
  </div>
</div>

答案 2 :(得分：0)

您可以在flex属性上进行转换，这在此处可能很有用。为了显示悬停过程中的描述，我将其opacity设置为0并将其绝对安全地放置在其相对父容器中。最后，我删除了text__separator div，因为作为flex的孩子并没有用。

.text__content {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.text__content__top {
  position: relative;
  margin-top: auto;
  transition: 0.5s flex ease-in-out;
}

.text__description {
  position: absolute;
  opacity: 0;
  transition: 0.4s opacity ease-in-out 0.1s;
}

.text__title {
  border-bottom: 2px solid red;
}

.thumbnail-component:hover .text__content__top {
  flex: 1;
}

.thumbnail-component:hover .text__content__top > * {
  pointer-events: none;
}

.thumbnail-component:hover .text__description {
  opacity: 1;
}
<div class="thumbnail-component">
  <div class="text">
    <div class="text__content">

      <div class="text__content__top">
        <p class="text__title">The movie title</p>
        <p class="text__description">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>

      <div class="text__content__bottom">
        <p class="text__author">Published by Author</p>
      </div>

    </div>
  </div>
</div>

jsFiddle

相关问题
最新问题