Анимация входа и выхода тегов hr при наведении
Я пытаюсь анимировать тег hr в теге привязки. По сути, я хочу, чтобы при наведении курсора на тег привязки тег hr должен скользить вправо, а при перемещении мыши тег hr должен скользить слева.
Что я делал до сих пор, так это то, что при наведении тег hr скользит влево, а не вправо, а при перемещении мыши он скользит обратно слева.
Я хочу добиться примерно следующего: 
Компонент кнопки
<Fragment>
<Link className = "btn" to = { this.props.linkTo }>
<div>
<span>{ this.props.text }</span>
<hr/>
</div>
</Link>
</Fragment>
CSS
.btn {
color: var(--black);
text-decoration: none;
display: flex;
}
.btn > div > span {
line-height: 30px;
}
.btn > div > hr {
margin: 0;
border: 0;
border-top: 2px solid var(--black);
width: 100%;
transition: width 0.2s ease-out;
}
.btn:hover div > hr {
width: 0;
}
@ Брайан Ле, я был бы рад сделать это, но сейчас я пользуюсь мобильным устройством.
Дай мне сделать это тогда. Это весь код, который у вас сейчас есть?
Да, это просто компонент реакции, над которым я работаю.
Знаешь что, у тебя там действительно хороший и простой ответ. Проверьте это
@ Брайан Ле проверил. Но он оставляет маленькую точку справа, когда анимация наведения завершается.
Ответы 3
Плавающее право приведет к переходу вправо, а когда оно вернется, оно также будет слева направо, как на изображении, которое вы разместили.
.btn:hover div > hr { width: 0; float: right; }
Для этого вы можете использовать свойство float. Вот простой пример с простым HTML.
div > hr {
transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
transition: width 1s ease-out;
width : 100%;
float: left;
}
div:hover > hr {
width:0%;
float: right;
}<div>
<h2>
Fooo Barrr
</h2>
<hr/>
</div>Красиво и просто!
Хороший. :) Почти так, как я ищу, но оставляет маленькую точку справа, когда анимация наведения завершена. Можно ли это сделать без float, поскольку все остальные части макета выполняются с помощью flexbox?
Вы можете использовать свойство float вместе с border-style и height сайта hr. Вы также можете изменить background-color на hr.
См. Фрагмент ниже:
.container{
display:inline-block;
position:relative;
}
.container > span{
cursor:pointer;
font-size:20px;
}
.container > hr {
transition: width 0.3s ease-out;
width:100%;
float:left;
border-style: none;
background: #000;
height: 2px;
margin:0;
}
.container:hover > hr {
width:0%;
float:right;
}<div class = "container">
<span>See what we do</span>
<hr/>
</div>
Не могли бы вы создать песочницу, чтобы я мог поиграть с ней?