Удалить строку с эффектом анимации в CSS

Хочу убрать строчку какой-то анимацией. Проблема в том, что когда я устанавливаю его ширину 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>

рабочий пример

jquery html css css-animations

14.06.2018 09:17

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

215

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Измените 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>

Что-то подобное я сделал, но выглядит не очень хорошо. Линия должна перемещаться из одной точки в другую

— 14.06.2018 09:27

14.06.2018 09:24

$('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>

Попробуйте использовать background-image вместо цветного, а затем уменьшите background-size со 100% до 0, сохранив background-repeat до no-repeat. Это даст вам желаемый эффект

14.06.2018 09:29

Ответ принят как подходящий

Поскольку вы повернули линию, вам также необходимо изменить ее положение, чтобы она не падала вниз.

Добавлять

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>

Спасибо, чувак, только одну вещь мы можем переместить в обратное положение. Средняя линия должна вернуться к своему конечному положению.

— 14.06.2018 09:45

14.06.2018 09:30