smooth.css

/* ==UserStyle==
@name           Smooth QQ
@description    这么顺滑的QQ谁不喜欢呢
@preprocessor   transitio
@version        0.2.1
@author         MapleRecall
@homepageURL    https://github.com/MapleRecall/Transitio-user-css?tab=readme-ov-file#smooth-qq
@license     	  MIT
==/UserStyle== */

:root {
  --smooth-tf: cubic-bezier(0.25, 0.8, 0, 1);
}

* {
  transition: color 0.1s, background-color 0.2s, visibility 0.2s, opacity 0.2s;
}

/* ==== 消息列表 ==== */

.ml-list.list[style^="padding-bottom: 0px"] .ml-item {
  animation: 0.4s var(--smooth-tf) backwards;
}

.ml-list.list[style^="padding-bottom: 0px"] .ml-item:nth-child(odd) {
  animation-name: msg-scroll1;
}

.ml-list.list[style^="padding-bottom: 0px"] .ml-item:nth-child(even) {
  animation-name: msg-scroll2;
}

.ml-list.list[style^="padding-bottom: 0px"] .ml-item:first-child {
  animation-name: msg-fadeIn;
  animation-delay: 0.05s;
}

@keyframes msg-scroll1 {
  0% {
    transform: translateY(32px);
  }
}

@keyframes msg-scroll2 {
  0% {
    transform: translateY(32px);
  }
}

@keyframes msg-fadeIn {
  0% {
    opacity: 0;
    transform: translateY(32px);
  }
}

/* ==== 菜单 ==== */

.q-context-menu:not(.sidebar-context-menu) {
  /* background: rgba(32, 32, 32, 0.5)!important; */
  transform-origin: top left;
  animation: menu-fadeIn 0.5s var(--smooth-tf);

  > * {
    animation: menu-item-fadeIn 0.4s 0.05s var(--smooth-tf) backwards;
  }
}

@keyframes menu-item-fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes menu-fadeIn {
  0% {
    background-color: transparent;
    transform: translateY(-8px);
  }
}

/* ==== 表情 ==== */

.sticker-panel,
.sticker-panel > div {
  animation: sticker-fadeIn 0.5s var(--smooth-tf);
}

.sticker-panel__pages > div,
.sticker-list-item {
  animation: sticker-page-fadeIn 0.5s var(--smooth-tf);
}

@keyframes sticker-fadeIn {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes sticker-page-fadeIn {
  0% {
    opacity: 0.25;
    transform: translateY(8px);
  }
}

/* ==== 资料卡 ==== */

#profile-container .q-popover:not([style^="top: 0"]) {
  overflow: hidden;
  opacity: 1;
  animation: profile-container-fadeIn 0.5s var(--smooth-tf);
}

@keyframes profile-container-fadeIn {
  0% {
    opacity: 0;
  }
}

#profile-container .q-popover:not([style^="top: 0"]) .buddy-profile {
  animation: buddy-profile-fadeIn 0.5s var(--smooth-tf);
}

@keyframes buddy-profile-fadeIn {
  0% {
    transform: translateY(-12px);
  }
}

/* ==== tooltips ==== */

*:hover > .q-tooltips__content,
*:hover > .lite-tools-q-tooltips__content {
  animation: tooltips-fadeIn 0.5s var(--smooth-tf);
}

@keyframes tooltips-fadeIn {
  0% {
    transform: translate(-50%, -4px);
    opacity: 0;
  }
}

/* ==== 设置 ==== */

@scope (.setting-main) {
  .q-scroll-view > * {
    animation: setting-page-fadeIn 0.5s var(--smooth-tf);
  }

  @keyframes setting-page-fadeIn {
    0% {
      opacity: 0.25;
      transform: translateY(16px);
    }
  }

  /* setting-list:not([is-active]) {
      animation: setting-list-inactive 0.5s var(--smooth-tf);
    }
  
    @keyframes setting-list-inactive {
      0% {
        padding-bottom: 8px;
      }
    }
  
    setting-list[data-direction="column"] setting-item,
    setting-list[data-direction="column"] setting-divider {
      animation: setting-item-fadeIn 0.5s var(--smooth-tf);
    }
  
    @keyframes setting-item-fadeIn {
      0% {
        opacity: 0.25;
        transform: translateY(-8px);
      }
    } */
}