javascript - 第一次尝试时我的悬停过渡不流畅

Question

我有一个号召性用语按钮，由文本组成，其中有一个箭头 >。我希望箭头在悬停时平滑地过渡到右侧，然后在悬停时返回原位。这是 CTA 按钮的 HTML、CSS 和 jQuery:

$("#lnkTech").hover(function(){
			$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateOut");
			$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateIn");
		},function(){
			$("#lnkTech > .spnCTATxtArrow").removeClass("arrowAnimateIn");
			$("#lnkTech > .spnCTATxtArrow").addClass("arrowAnimateOut");
		});

/* CTA Styles */

.divCTA {
	background-color: #00AA7E;
	padding: 20px 0px;
	text-align: center;
	width: 12em;
	font-weight: bold;
	text-transform: uppercase;
	font-size: 0.8em;
	margin-left: auto;
	margin-right: auto;
}

.divCTA:hover {
	background-color: #009E75;
}

.divCTA a {
	color: #fff;
	text-decoration: none;
}

.divCTA a:hover {
	color: #fff;
	text-decoration: none;
}

.spnCTATxt {
	position: relative;
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}

.spnCTATxtArrow {
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}

.arrowAnimateIn {
	position: relative;
	left: 15px; 
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}

.arrowAnimateOut {
	position: relative;
	left: 0px; 
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}

.arrowAnimate {
	position: relative;
	-webkit-transition: all 1s ease-in-out;
  	-moz-transition: all 1s ease-in-out;
  	-o-transition: all 1s ease-in-out;
  	transition: all 1s ease-in-out;
}

<div class="divCTA">
  <span class="spnCTATxt"><a href="ls.html" id="lnkTech" class="arrowAnimate">Learn More <span class="spnCTATxtArrow" id="lnkTechArrow">&gt;</span></a></span>
</div>

加载或刷新时会发生什么，箭头在第一次悬停时快速跳到右上方，然后在悬停时开始过渡，在随后的悬停时，过渡起作用。我希望每次都能进行过渡，即使是在第一次悬停时也是如此。我什至将过渡 CSS 添加到所有容器，但我仍然得到相同的结果。

请帮我解决这个问题:(

Answer 1

解决方法很简单，你需要给元素设置一个初始值，悬停效果会从这个值开始到transform值 所以添加到你的CSS

#lnkTech > .spnCTATxtArrow{
  left:0px;

}