Question

我似乎无法在我网站上的某个div上进行持续时间转换。

如果您转到联系人部分，将鼠标悬停在地图上，则div过渡正常

如果您将鼠标悬停在详细信息部分（带有3个图标的灰色区域）上，那么当该div向左滑动时，该过渡将在内部div上进行转换。

但是联系表单不希望受到转换持续时间的影响，它会向左移动。

这是网站：http://www.onepixelroom.com/londonrefurb/

这是代码：

HTML：

    <div id="contact-div">
      <div id="contact-title-box">
    <div id="contact-title">
          <h1>CONTACT</h1>
          <hr>
        </div>
  </div>
      <div id="map_canvas-antialiasing"></div>
      <div id="sliding-footer">
    <div id="map_canvas"></div>
    <div id="sliding-second">
          <div id="sliding-details">
        <div id="sliding-details-container"> <a href="mailto:hello@onethousandsheep.com?subject=Web Site Enquiry" style="text-decoration:none">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/mail.png"/></div>
            <div class="sliding-details-txt">HELLO@DRONINRENOVATIONS.COM</div>
          </div>
          </a> <a href="skype:0044750221963?call" style="text-decoration:none">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/phone.png"/></div>
            <div class="sliding-details-txt">+44 07502221963</div>
          </div>
          </a> <a href="https://maps.google.com/maps?q=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&hl=en&sll=51.487207,-0.177784&sspn=0.012146,0.021801&hnear=10+Elm+Park+Gardens,+London+SW10+9NY,+United+Kingdom&t=m&z=16"  style="text-decoration:none" target="_blank">
          <div class="sliding-details-box">
            <div class="sliding-details-square-hover"></div>
            <div class="sliding-details-img"><img src="http://www.onepixelroom.com/londonrefurb/img/home.png"/></div>
            <div class="sliding-details-txt">SOUTH KENSINGTON, LONDON UK</div>
          </div>
          </a> </div>
      </div>
          <div id="form-container">
        <div id="form-wrap">
              <form method="post" action="contactengine.php" id="commentForm">
            <fieldset>
                  <div id="formLeft">
                <label for="Name"></label>
                <div class="input-bg">
                      <input type="text" name="Name" placeholder="Name" id="Name" />
                    </div>
                <label for="Tel"></label>
                <div class="input-bg">
                      <input type="text" name="Tel" placeholder="Number" id="Tel" />
                    </div>
                <label for="Email"></label>
                <div class="input-bg">
                      <input type="text" name="Email" placeholder="Email" id="Email" />
                    </div>
              </div>
                  <div id="formRight">
                <label for="Message"></label>
                </td>
                <div class="message-bg">
                      <textarea name="Message" placeholder="Message" id="Message" rows="20" cols="20" ></textarea>
                    </div>
                <br />
                <input type="submit" name="submit" value="Submit" class="submit-button" />
              </div>
                  <div class="clear"></div>
                </fieldset>
          </form>
            </div>
      </div>
        </div>
  </div>
    </div>

CSS：

#contact-div {
    height:760px;
    float:left;
    margin:0 auto;
    width:100%;
}

#contact-title-box
{
    height:300px;
    position:relative;
}
#contact-title {
    top:110px;
    position:relative;
}
#contact-title hr {
    position:relative;
    top:30px;
    width: 230px;
    margin:0 auto;
    border: 0; 
    height: 1px; 
    background-color:#49E2D6;
}
#contact-title h1 {
    font-family: Raleway, Verdana, sans-serif;
    font-size: 50px;
    font-weight: 200;
    font-style: normal;
    letter-spacing: 3px;
    color: #3A3A3A;     
}
#sliding-footer {
    z-index: 0;
    height: 450px;
    width:100%;
}
#map_canvas-antialiasing {
    height:10px;
    position:relative;
    background-color:#FFFFFF;
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    z-index:3;
}
#map_canvas {
    float:left;
    width: 100%;
    height: 450px;
    cursor: url(http://www.onepixelroom.com/londonrefurb/img/cursor.png) 21 26, move;
}
#map_canvas:hover + #sliding-second
{
left:45%;   
}
#sliding-second {
    background-color: #dce9e8;
    position: absolute;
    left: 20%;
    width: 80%;
    height: 450px;
    z-index:3;
    margin: 0 auto;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
#sliding-details {
    width: 700px;
    height: 450px;
    background-color: #363636;
    position: absolute;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    left:-100px;
}
#sliding-details-container {
    float: left;
    top: 103px;
    margin: 0 auto;
    width: 400px;
    height: 200px;
    position: relative;
    left:25px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.sliding-details-box:hover .sliding-details-square-hover{
    transform: translate(0,-50px);
    -webkit-transform: translate(0,-50px);
    -o-transform: translate(0,-50px);
    -moz-transform: translate(0,-50px);
}
.sliding-details-box {
    margin-bottom:50px;
    height: 50px;
    width: 400px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    overflow:hidden;
}
.sliding-details-box:hover{
cursor: url(http://www.onethousandsheep.com/img/cursor.png) 21 26, move;    
}
.sliding-details-square-hover {
    float: left;
    background: #FFFFFF;
    background: -moz-linear-gradient(top, #FFFFFF 50%, #49E2D6 50%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,#FFFFFF), color-stop(50%,#49E2D6));
    background: -webkit-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
    background: -o-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%);
    background: -ms-linear-gradient(top, #FFFFFF 50%,#49E2D6 50%); 
    background: linear-gradient(to bottom, #FFFFFF 50%,#49E2D6 50%);
    position: relative;
    border: none;
    width: 50px;
    height: 100px;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
.sliding-details-img img {
    border: none;
    position:relative;
    top:15px;
    width: 20px;
    height: 20px;
}
.sliding-details-img {
    position:absolute;
    width: 50px;
    height: 50px;
}
.sliding-details-txt {
    z-index: 2;
    float: left;
    position: relative;
    top: 16px;
    margin-left: 30px;
    width: 300px;
    text-align: left;
    font-family: 'Droid Sans', serif;
    font-size: 14px;
    font-weight: 800;
    color: #dce0df;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
    letter-spacing:2px;
    overflow:hidden;
}
#sliding-details:hover + #form-container {
    left:600px;
}
#sliding-details:hover #sliding-details-container {
    left:14%;   
}
#form-container {
    background-color: #49E2D6;
    height: 450px;
    width: 100%;
    position:relative;
    z-index:3;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}
#form-wrap {
    width: 1000px;
    background-color: #49E2D6;
    height: 300px;
    position: relative;
    margin: 0 auto;
    top:85px;
    z-index:3;
}

Answer 1

您必须为form-container设置初始左侧值。如果没有初始左值，则浏览器不知道从哪里设置动画到设置的悬停值。

#form-container {
    background-color: #49E2D6;
    height: 450px;
    width: 100%;
    position:relative;
    z-index:3;
    left: 0; // This one is important!
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s;
}

这可以解决您的问题。

Answer 2

检查

transition    : all 0.2s ease-in-out; 
      -o-transition       : all 0.2s ease-in-out;
      -moz-transition     : all 0.3s ease-in-out;
  -webkit-transition  : all 0.3s ease-in-out;

转换CSS持续时间不起作用

2 个答案: