Jquery 控制转换CSS的起点

我有一个包含文本的div，当链接悬停时，它可以用CSS进行转换。然而，我不明白它为什么会起作用，当我使用这些值时，它会改变divs的结束位置（绝对居中的垂直和水平方向）。我想换一个起跳位置

HTML

---

.cat单元格div淡入并从父div的底部向上移动一定量到父div的中心。我希望缩短它向上移动的量（看起来它向上移动了大约100px，我只希望它向上移动50到中心）。但是，当我更改任何值时，它将不再以转换结束时的父级为中心。

转换的起始位置由初始状态决定（即.cat单元格CSS）

translateY（-50%）

会将.cat单元格向上移动其自身大小的50%。链接：悬停处于“活动”状态

因此

.linkage:hover+.cat单元格

设置元素的结束状态，而

转换：所有0.5s的轻松度

告诉浏览器显示转换可能会改变属性的值（在这种情况下，

不透明度

和

转换

）

---

另外，最好不要使用

转换：all 0.5s ease

，因为浏览器将尝试转换元素的所有属性。使用

transition:transform 0.5s ease，opacity 0.5s ease

。

那么我如何更改它的开始/初始状态，同时确保转换在当前位置结束。此外，转换为过渡：0.5s轻松转换；完全移除运动更改

.cat单元格的位置（顶部

，

左侧

，

右侧

，

底部

）以更改起始位置。您可能还需要更改

translateY

，以弥补更改起始位置所造成的差异。在这种情况下，您可能希望保留

转换：all

，因为供应商前缀（-moz，-o-）。我只想告诉你们，在大多数情况下，这被认为是坏习惯。接下来的问题是，我似乎找不到正确的组合。将translate设置为40%，并将top%增加到大约60%。反之亦然，

top

位置相对于其父级大小，而

translateY

则相对于元素本身的大小。为了确定正确的值，您需要知道两者的大小。尝试（暂时）在

px

中设置这两个选项，以获得对它的感觉；）或者使用

top

而不是

translateY

来简化自己。

<div class="bg-img" style="background-image:url('...');">

   <a href="#" class="linkage"></a>

   <!-- Put cat div overtop article -->
   <div class="cat-cell">
        text is here
   </div>

</div>  

.cat-cell {
  position: absolute;
  top: 50%; right: 0; left: 0; bottom: auto;
  margin: 0 auto;
  z-index: 9;
  opacity: 0; 
  text-align: center;
  max-width: 60%;

  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;    
  transition: all 0.5s ease;    
}

.linkage:hover + .cat-cell {
  opacity: 1;

  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}