在CSS中删除具有动画效果的行

Question

我想用某种动画删除该行.问题是当我将宽度设置为0然后它也改变了它的位置.这不应该发生.

该线应从起点移动到终点而不改变其位置.

$('button').click(function(){
$('.main').toggleClass('remove')
})

.line{
  width:60px;
  height:2px;
  background:#000;
  transform: rotate(30deg);
  position:absolute;
  top:20px;
  z-index:1;
  transition: all 0.3s ease-in-out;
}

.remove .line{
  width:0
}
.main{
  position:relative;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  position:relative;
  left:8px;
  top:2px
}

button{
  margin-top:60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="line"></div>
<span></span>
</div>

<button>toggle</button>

小提琴

Answer 1

因为你已经旋转了线,你还需要改变它的位置,使它看起来不会下降.

加

top:2px;

到.remove .line.

2px 匹配跨度 top:2px

$('button').click(function(){
$('.main').toggleClass('remove')
})

.line{
  width:60px;
  height:2px;
  background:#000;
  transform: rotate(30deg);
  position:absolute;
  top:20px;
  z-index:1;
  transition: all 0.3s ease-in-out;
}

.remove .line{
  width:0;
  top:2px;
}
.main{
  position:relative;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  position:relative;
  left:8px;
  top:2px
}

button{
  margin-top:60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="line"></div>
<span></span>
</div>

<button>toggle</button>

更新:将'top'设置为2px会导致可见的跳转 - 结果top不会受到缓动选项的影响transition.受影响的是什么margin.

由于有一个30度的旋转,你可以计算出所需的确切值,但是一点试验和错误给出了一个工作版本:

margin-top:-16px;
margin-left:3px;

$('button').click(function(){
$('.main').toggleClass('remove')
})

.line{
  width:60px;
  height:2px;
  background:#000;
  transform: rotate(30deg);
  position:absolute;
  top:20px;
  z-index:1;
  transition: all 0.3s ease-in-out;
}

.remove .line{
  width:0;
  margin-top:-16px;
  margin-left:3px;
}
.main{
  position:relative;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  position:relative;
  left:8px;
  top:2px
}

button{
  margin-top:60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="line"></div>
<span></span>
</div>

<button>toggle</button>

额外:更改margin也会导致要求添加使其反向运行.

再次,使用一点试验和错误,可以根据30度角计算精确值,给出:

margin-left:55px;
margin-top:15.5px;

$('button').click(function(){
$('.main').toggleClass('remove')
})

.line{
  width:60px;
  height:2px;
  background:#000;
  transform: rotate(30deg);
  position:absolute;
  top:20px;
  z-index:1;
  transition: all 0.3s ease-in-out;
}

.remove .line{
  width:0;
  margin-left:55px;
  margin-top:15.5px;
}
.main{
  position:relative;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  background:red;
  border-radius:50%;
  position:relative;
  left:8px;
  top:2px
}

button{
  margin-top:60px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="line"></div>
<span></span>
</div>

<button>toggle</button>