Question

我没有这种过渡工作。悬停效果正在起作用：将鼠标悬停在“以前的案例”上时，箭头会向左移动。但是我为平滑动画设置的过渡根本没有生效。

.icon-left-open-big {position: relative;
                     transition: right 2s;}

.bottom-link-group:hover .icon-left-open-big {right: 10px;}

我的html是：

<section class="fuss-nav">
  <div class="container-fluid abstand pb-5">
   <div class="row no-gutters mx-sm-3 mx-md-2">

    <div class="col-3 px-1 col-sm-4">
      <a href="#" class="bottom-link-group">
        <i class="icon-left-open-big pfeil"></i>
        <span class="d-none d-sm-inline">previous case</span>
      </a>
    </div>

       <div class="col-6 col-sm-4 text-center">
           <a href="#" class="back-to-top">back to top</a>
      </div>

      <div class="col-3 px-1 col-sm-4 text-right">
        <a href="#" class="bottom-link-group">
          <span class="d-none d-sm-inline">next case</span>
          <i class="icon-right-open-big pfeil"></i>
        </a>  
    </div>

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

Answer 1

您需要定义一个初始值right:0px，因为当将属性的值从某项更改为另一项时，过渡会起作用

查看代码示例

.icon-left-open-big,.icon-right-open-big {
  position: relative;
  transition: right 1s;
  right:0;
}

.bottom-link-group:hover .icon-left-open-big {
  right: 10px;
}

.bottom-link-group:hover .icon-right-open-big {
  right: -10px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<section class="fuss-nav">
  <div class="container-fluid abstand pb-5">
    <div class="row no-gutters mx-sm-3 mx-md-2">

      <div class="col-3 px-1 col-sm-4">
        <a href="#" class="bottom-link-group">
          <i class="icon-left-open-big pfeil"><</i>
          <span class="d-none d-sm-inline">previous case</span>
        </a>
      </div>

      <div class="col-6 col-sm-4 text-center">
        <a href="#" class="back-to-top">back to top</a>
      </div>

      <div class="col-3 px-1 col-sm-4 text-right">
        <a href="#" class="bottom-link-group">
          <span class="d-none d-sm-inline">next case</span>
          <i class="icon-right-open-big pfeil">></i>
        </a>
      </div>

    </div>
  </div>
</section>

位置属性转换不起作用（引导程序4）

1 个答案: