如何实现Tumblr点赞按钮状态切换（Like -> Liked）

我参考了一篇文章的代码实现自定义Tumblr点赞按钮，现在想实现用户点赞后，按钮文本从“Like”平滑过渡到“Liked”的效果。

当前使用的代码 #

CSS代码 #

.custom-like-button {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.like_button:hover + .our_button {
  color: red;
}
.like_button.liked + .our_button {
  background: white;
  color: red;
}

HTML代码 #

<center>
   <div class="custom-like-button">
   {LikeButton}
       <span class="our_button">
          &hearts;
       </span>
   </div>
</center>

修改后的代码（实现文本切换过渡） #

1. 更新HTML代码 #

把爱心图标换成包含“Like”和“Liked”文本的结构，方便切换：

<center>
  <div class="custom-like-button">
    {LikeButton}
    <div class="our_button">
      <span class="like-text">Like</span>
      <span class="liked-text">Liked</span>
    </div>
  </div>
</center>

2. 更新CSS代码 #

添加过渡动画，利用liked类控制文本的显示/隐藏和样式变化：

.custom-like-button {
  position: relative;
  display: inline-block; /* 改成inline-block适配文本宽度 */
  min-width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  overflow: hidden; /* 隐藏超出的文本 */
}

.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}

.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}

.our_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.like-text, .liked-text {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.liked-text {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(100%);
  opacity: 0;
  color: red;
}

.like_button:hover + .our_button {
  background-color: #f5f5f5;
}

.like_button.liked + .our_button .like-text {
  transform: translateY(-100%);
  opacity: 0;
}

.like_button.liked + .our_button .liked-text {
  transform: translateY(0);
  opacity: 1;
}

补充说明 #

• 调整按钮为inline-block以适配文本宽度，优化了尺寸和布局让文本显示更自然
• 通过两个<span>分别承载“Like”和“Liked”文本，利用CSS transform和opacity属性实现上下滑动的平滑过渡
• 依赖Tumblr原生的liked类触发状态切换，无需额外复杂逻辑

如果遇到iframe状态未及时同步的情况，可以添加以下JS代码放在页面底部：

// 监听iframe加载，同步点赞状态
document.querySelectorAll('.like_button iframe').forEach(iframe => {
  iframe.addEventListener('load', function() {
    try {
      const isLiked = this.contentWindow.document.querySelector('.like').classList.contains('liked');
      this.parentElement.classList.toggle('liked', isLiked);
    } catch(e) {} // 跨域限制可能报错，直接忽略即可
  });
});

内容的提问来源于stack exchange，提问作者diacetyl