jquery - 悬停时CSS伸缩边框动画

Question

我对 CSS 动画相当陌生，而且我无法按照我想要的方式设置边框动画。最初我想让左右边界从中心伸缩，并在 result-col 元素悬停时与顶部和底部边界相遇。

我能够弄清楚如何处理顶部和底部边框，但我将它们放在不同的 div 中，并给了它们初始尺寸。

如有任何帮助或建议，我们将不胜感激。

jsfiddle

#case-results {
  background: #f6f5f0;
  padding: 0 0 40px 0;
  text-align: center;
}


.case-results-title hr{
  border: 1px solid #959a90;
  width: 35%;
  float: left;
}


.case-results-title i{
  font-size: 30px;
  color: #787c74;
  padding-top: 5px;
}

.result-col {
  color: #45474e;
}

.result-col:hover {
  color: #45474e;
}

.result-top {
  margin: 0 auto;
  width: 60px;
  height: 20px;
  border-top: 5px solid #959a90;
  border-left: 5px solid #959a90;
  border-right: 5px solid #959a90;
  padding-bottom: 5px;
  margin-top: 40px;
}

.result-col:hover .result-top {
  width: 100%;
  background: #FFF;
  border-top: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition: .9s;
}

.result-bottom {
  margin: 0 auto;
  width: 60px;
  height: 20px;
  border-bottom: 5px solid #959a90;
  border-left: 5px solid #959a90;
  border-right: 5px solid #959a90;
  padding-top: 10px;
}

.result-col:hover .result-bottom {
  width: 100%;
  background: #FFF;
  border-bottom: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition: .9s;
}

.result-txt {
  min-height: 210px;
    
}
.result-txt p{
    margin:0 0;
}
.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition-delay: .9s;
  /*transition: .5s;*/
}

.result-amount {
  font-size: 45px;
  padding-top: 30px;
}

.result-type {
  font-size: 24px;
  padding-top: 20px;
}

.result-description {
  padding-bottom: 20px;
  margin: 0;
}

<section id="case-results">
    	
    	<div class="container">
    		<div class="row">
                <div class="col-sm-6 result-col col-md-3">
                <div class="result-top"></div>
                <div class="result-txt">
                    <p class="result-amount">$100</p>
                    <p class="result-type">Settlement</p>
                    <p class="result-description">blah blah blah</p>
                </div>
                <div class="result-bottom"></div>
                </div>
    		</div><!--/.row-->
    	</div><!--/.container-->

    </section><!--/#case-results-->

Answer 1

我认为您的答案可能是为 min-height 属性设置动画。

您必须设置一个最小高度来取消容器的原始状态 (result-txt)，然后在悬停状态下使其变大。

有了这个，您就不需要额外的顶部和底部 div。

.case-results-title hr{
  border: 1px solid #959a90;
  width: 35%;
  float: left;
}


.case-results-title i{
  font-size: 30px;
  color: #787c74;
  padding-top: 5px;
}

.result-col {
  color: #45474e;
}

.result-col:hover {
  color: #45474e;
}

.result-txt {
  margin: 0 auto;
  width: 60px;
  border-top: 5px solid #959a90;
  border-left: 0px solid #959a90;
  border-right: 0px solid #959a90;
    border-bottom: 5px solid #959a90;
  padding-bottom: 5px;
  margin-top: 40px;

  height: auto;
  min-height:20px;
}

.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-top: 5px solid #78a1bb;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
    border-bottom: 5px solid #78a1bb;
  transition: .9s;


  min-height:200px;
}
.result-txt p{
    margin:0 0;
}
.result-col:hover .result-txt {
  width: 100%;
  background: #FFF;
  border-left: 5px solid #78a1bb;
  border-right: 5px solid #78a1bb;
  transition-delay: .9s;
  /*transition: .5s;*/
}
.result-amount {
  font-size: 45px;
  padding-top: 30px;
}
.result-type {
  font-size: 24px;
  padding-top: 20px;
}
.result-description {
  padding-bottom: 20px;
  margin: 0;
}
#case-results {
  background: #f6f5f0;
  padding: 0 0 40px 0;
  text-align: center;
}

<section id="case-results">
    	
    	<div class="container">
    		<div class="row">
                <div class="col-sm-6 result-col col-md-3">
                
                <div class="result-txt">
                    <p class="result-amount">$100</p>
                    <p class="result-type">Settlement</p>
                    <p class="result-description">blah blah blah</p>
                </div>
                
                </div>
    		</div><!--/.row-->
    	</div><!--/.container-->

    </section><!--/#case-results-->