我的悬停过渡在第一次尝试时并不平稳

Question

我有一个带有箭头＆gt;的文字制成的号召性用语按钮。在里面。我希望箭头在悬停时顺利过渡到右边，然后在悬停时返回原位。这里是CTA按钮的HTML，CSS和jQuery：

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

请帮我解决这个问题:(

Answer 1

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

#lnkTech > .spnCTATxtArrow{
  left:0px;

}