位置转换属性不起作用(引导程序 4)

Question

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

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

我的网址是：

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