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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

fiddle

Answer 1

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

添加

top:2px;

到.remove .line。

2px以匹配范围top:2px

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

更新：设置＆＃39; top＆＃39;到2px导致可见的跳跃 - 结果top不受transition的缓动选项的影响。受影响的是margin。

由于有30度旋转，你可以计算出所需的确切值，但是有一点试验和错误会给出一个有效的版本：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

额外：更改margin也会导致请求添加使其反转。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将model = Sequential() model.add(LSTM(64, input_shape=(32, 6), kernel_initializer = 'normal', activation='tanh')) model.add(Dense(32, kernel_initializer = 'normal', activation='relu' )) model.add(Dense(1,kernel_initializer = 'normal', activation="sigmoid") model.compile(loss='binary_crossentropy', optimizer='adam', metrics=['accuracy']) 更改为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
}

Answer 3

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

尝试使用background-image代替颜色，然后将background-size保持为background-repeat，将no-repeat从100％缩减为0。这将为您带来理想的效果