悬停状态之间元素高度的转换

Question

我似乎无法让我的元素为我的过渡工作。我将框动画化为悬停状态之间更大 and/or 更小的高度。我做错了什么？

body{
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width:13%;
  padding: 40px;
  font-family: Open Sans,Arial,sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
    max-height: 108px;
    overflow: hidden;
    margin-bottom: 10px;
    -webkit-transition: height 0.9s;
    -moz-transition: height 0.9s;
    transition: height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
    max-height: none;
}

<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">
                
                
                
                <div class="et_pb_testimonial_description" style="margin-left: 0px;">
                    <div class="et_pb_testimonial_description_inner"><div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin."</div></div>
                    <span class="et_pb_testimonial_author">Antonio Compbell</span>
                    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
                </div>
            </div>

Answer 1

需要解决两件事：

您的转换发生在 max-height，而不是 height。
悬停 max-height 应该是一个数字，而不是 none。

请参阅下面的固定代码段。唯一的变化是上面提到的两项。

body {
  background-color: #000;
}

.martin-testimonials {
  background-color: #fff;
  border-radius: 6px 6px 6px 6px;
  width: 13%;
  padding: 40px;
  font-family: Open Sans, Arial, sans-serif;
  font-size: 15px;
  line-height: 27px;
}

.martin-testimonials .et_pb_testimonial_content {
  max-height: 108px;
  overflow: hidden;
  margin-bottom: 10px;
  -webkit-transition: max-height 0.9s;
  -moz-transition: max-height 0.9s;
  transition: max-height 0.9s;
}

.martin-testimonials:hover .et_pb_testimonial_content {
  max-height: 300px;
}

<div class="et_pb_module et_pb_testimonial et_pb_testimonial_0 martin-testimonials clearfix et_pb_text_align_left et_pb_bg_layout_light et_pb_icon_off et_pb_testimonial_no_image et_had_animation" style="">



  <div class="et_pb_testimonial_description" style="margin-left: 0px;">
    <div class="et_pb_testimonial_description_inner">
      <div class="et_pb_testimonial_content">"Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat hendrerit massa. In cursus ornare sollicitudin. Nunc consequat justo eget enim finibus porta. Suspendisse orci nunc, rutrum quis nunc sed, feugiat
        hendrerit massa. In cursus ornare sollicitudin."</div>
    </div>
    <span class="et_pb_testimonial_author">Antonio Compbell</span>
    <p class="et_pb_testimonial_meta"><span class="et_pb_testimonial_position">Student</span><span class="et_pb_testimonial_separator">,</span> <span class="et_pb_testimonial_company">Yoga Studio</span></p>
  </div>
</div>

悬停状态之间元素高度的转换

Transition for element height between hover state

html

css

css-animations