时间戳

首页 > 解决方案 > 位置属性的转换不起作用（引导程序 4）

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

问题描述

我没有让这种过渡工作。悬停效果有效：当悬停在“上一个案例”上时，箭头向左移动。但是我设置的平滑动画的过渡根本没有生效。

.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>

标签： htmlcssbootstrap-4

解决方案

您需要定义初始值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>

推荐阅读