fix: 侧边箭头小动画

src/components/RightContent/Book/components/UserList/index.less

@@ -137,13 +137,28 @@
 //   border: 1px solid #a590c1;
 //   border-right: none;
 // }
-.sideBg {
+.side-bg {
   position: absolute;
   z-index: -1;
   width: 15px;
   height: 95px;
   background: url('/sideBg.png') no-repeat -14px 0;
 }
-.sideBg:hover {
+.show-short .side-bg {
   background: url('/sideBg.png') no-repeat 0 0;
 }
+.side-bg-current {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 15px;
+  height: 95px;
+  background: url('/sideBg-current.png') no-repeat -1px 0;
+  transition: all 0.5s cubic-bezier(0.34, 1.25, 0.3, 1);
+  transition-delay: 0.1s;
+}
+.show-short .side-bg-current:hover {
+  background: url('/sideBg-current.png') no-repeat 0 0;
+  transform: rotate(180deg);
+}

src/components/RightContent/Book/components/UserList/index.tsx

@@ -20,14 +20,16 @@ const UesrList: React.FC<UserListProps> = ({ onlineList }) => {
   const intl = useIntl()
   return (
     <>
-      <span className="absolute top-70 left-[-0.75rem]" onClick={() => setVisible(!visible)}>
-        <div className="sideBg" />
-      </span>
       <div
         className={[
           'book-list border border-solid border-hex-1d1d1d border-opacity-7 bg-hex-f7f9fa flex flex-col bg-hex-f9f7fa text-hex-666',
           visible ? 'show-short' : ''
         ].join(' ')}>
+        <span className="absolute top-70 left-[-0.75rem]" onClick={() => setVisible(!visible)}>
+          <div className="side-bg">
+            <span className="side-bg-current" />
+          </div>
+        </span>
         <div className="flex-1 h-full custom-scroll">
           <div className="w-full">
             <ul className="list-none m-0">