当css转换发生时，如何阻止文本移动

Question

我有一个盒子，里面有两个同时发生的独立css转换。

当转换发生时，图标下方的标题和段落文本移动位置

参见JS Fiddle：http://jsfiddle.net/Lsnbpt8r/

这是我的html

 <div class="row">            
        <div class="col-md-4 text-center transistion">
          <div class="box">
          <i class="circle-pos circle glyphicon glyphicon-home icon"></i>
              <h3 class="heading">
                Construction
              </h3>
              <p>This is how we do it</p>
          </div>
        </div>
        <div class="col-md-4 text-center transistion">
          <div class="box">
          <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
              <h3 class="heading">
                Interior Design
              </h3>
              <p>This is how we do it</p>
          </div>
        </div>
        <div class="col-md-4 text-center transistion">
          <div class="box">
          <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
              <h3 class="heading">
                Service
              </h3>
              <p>This is how we do it</p>
          </div>
        </div>
      </div>

这是我的css

        .icon {
      font-size: 32px;
      vertical-align: middle;
      padding-top: 35px;
      padding-right: 9px;
    }
    .icon:hover{
      font-size: 48px;
      color: #003176;
      padding-top: 25px;
      padding-right: 5px;
    }
    .circle {
        width: 120px;
        height: 120px;
        -moz-border-radius: 50%; 
        -webkit-border-radius: 50%; 
        border-radius: 50%;
        background: #f3f3f3;
          -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
        .box:hover .circle{
            width: 100px;
            height: 100px;
            background: #f7f7f7;
        }
        .circle-pos{
            margin-top: -60px;
        }
        .box:hover .circle-pos{
            margin-top: -50px;
        }
        .box:hover .icon{
            font-size: 48px;
            color: #003176;
            padding-top: 25px;
            padding-right: 5px;  
        }
    .box{
      border: 0px 1px 2px 1px solid #f1f1f1;
      border-top: 5px solid #003176;
      height: 150px;
        font-size: 18px;
        -webkit-transition: all 300ms linear;
        -moz-transition: all 300ms linear;
        -o-transition: all 300ms linear;
        -ms-transition: all 300ms linear;
        transition: all 300ms linear;
    }
    .box:hover{
      background-color: #135379;
        color:  #b9f9ff;
    }
    .heading{
    padding: 50px 0 12px 0;
    margin: 0 0 25px 0;
    height: 24px;
    position: relative;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    }
    .transistion{
        padding-top: 60px;  
    }

我已经为方框设置了一个固定的高度，但这并不能阻止文本的移动，任何帮助或建议都将不胜感激。

Answer 1

将图标包装在容器中：

 <div class="icon-container">
       <i class="circle-pos circle glyphicon glyphicon-home icon"></i>
 </div>

并给它一个固定的高度：

.icon-container {
     height: 50px; // Or whatever you want
}

对我来说效果很好（我只将其应用于第一个图标）：http://jsfiddle.net/63Lbwonf/2/你可以玩这些数字。我只是在上面扔了50像素，它固定了容器的高度，所以H1在动画中不会移动。

Answer 2

为h3和下面的文本添加一个额外的div，在本例中，我将其命名为.bottombox。然后我给它一个position:absolute属性，这样我就可以把它从剩下的元素流中去掉，这意味着它不会受到动画大小、填充和边距变化的影响。

因此，您的HTML如下所示：

<div class="row">
    <div class="col-md-4 text-center transistion">
        <div class="box"> <i class="circle-pos circle glyphicon glyphicon-home icon"></i>
            <div class="bottombox">
                 <h3 class="heading">
                    Construction
                  </h3>
                <p>This is how we do it</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 text-center transistion">
        <div class="box"> <i class="circle-pos circle glyphicon glyphicon-wrench icon"></i>
            <div class="bottombox">
                 <h3 class="heading">
                    Interior Design
                  </h3>
                <p>This is how we do it</p>
            </div>
        </div>
    </div>
    <div class="col-md-4 text-center transistion">
        <div class="box"> <i class="circle-pos circle glyphicon glyphicon-thumbs-up icon"></i>
            <div class="bottombox">
                 <h3 class="heading">
                    Service
                  </h3>
                <p>This is how we do it</p>
            </div>
        </div>
    </div>
</div>

---

然后这就是你的CSS:

.icon {
    font-size: 32px;
    vertical-align: middle;
    padding-top: 35px;
    padding-right: 9px;
}
.icon:hover {
    font-size: 48px;
    color: #003176;
    padding-top: 25px;
    padding-right: 5px;
}
.circle {
    width: 120px;
    height: 120px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #f3f3f3;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.circle:hover {
    width: 100px;
    height: 100px;
    background: #f7f7f7;
}
.circle-pos {
    margin-top: -60px;
}
.circle-pos:hover {
    margin-top: -50px;
}
.box {
    border: 0px 1px 2px 1px solid #f1f1f1;
    border-top: 5px solid #003176;
    height: 200px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
    position:relative;
}
.box:hover {
    background-color: #135379;
}
.heading {
    padding: 60px 0 12px 0;
    margin: 0 0 13px 0;
    height: 24px;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}
.bottombox {
    bottom:20px;
    left:0;
    width:100%;
    text-align:center;
    position: absolute;
}
.transistion {
    padding-top: 60px;
}

当然，如果需要的话，你可以做一些改变，但这或多或少是的要点

请参阅fiddle

Answer 3

问题是您的文本是相对于圆定位的，并且在转换中圆越来越小。您可以在.circle:hover{}中添加类似margin-bottom: 10px;的内容，但这会使文本在转换过程中抖动，因此我建议将文本定位为绝对位置。