2

我想用某种动画删除这条线。问题是当我将它设置为宽度 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>

小提琴

4

3 回答 3

5

因为你已经旋转了这条线，所以你还需要改变它的位置，使它看起来不会下拉。

添加

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>

于 2018-06-14T07:30:19.747 回答
2

更改width:0;为opacity: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{
  opacity: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>

于 2018-06-14T07:24:22.623 回答
1 

$('button').click(function(){
$('.main').toggleClass('remove')
})
  .line {
    width: 60px;
    height: 2px;
    background-image: url("https://www.stellamccartney.com/cloud/stellawp/uploads/2016/01/1920x1080-black-solid-color-background.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
    transform: rotate(30deg);
    position: absolute;
    top: 20px;
    z-index: 1;
    transition: all 0.3s ease-in-out;
  }

  .remove .line {
    background-size: 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>

尝试使用 abackground-image代替颜色，然后通过保持tobackground-size将 100% 减少到 0 。这会给你想要的效果background-repeatno-repeat

于 2018-06-14T07:29:24.160 回答