修复一下书本动画

1

src/components/the-noticeBar/index.tsx

@@ -36,15 +36,18 @@ export default defineComponent({
       time: null as any
     });
     const init = () => {
-      console.log('进入准备执行执行init', contentRef.value.getBoundingClientRect().width, wrapRef.value.getBoundingClientRect().width)
-      console.log(!wrapRef.value)
       if (notiData.isActive || !contentRef.value || !wrapRef.value) return;
       notiData.isActive = true;
+
       notiData.contentWidth = contentRef.value.getBoundingClientRect().width;
       notiData.wrapWidth = wrapRef.value.getBoundingClientRect().width;
+      console.log('进来加载动画', notiData.contentWidth - notiData.wrapWidth)
+
+      if (notiData.contentWidth - notiData.wrapWidth > 0) {
+        startAnimate();
 
+      }
 
-      startAnimate();
     };
 
     onMounted(() => {
@@ -84,12 +87,13 @@ export default defineComponent({
         }
       }
     );
+    //    onMouseenter={() => !props.isAnimation && init()}
+    // onMouseleave={() => !props.isAnimation && stopAnimate()}
     return () => (
       <div
         ref={wrapRef}
         class={[styles.wrap, props.isAnimation ? styles.isAnitaion : '']}
-        onMouseenter={() => !props.isAnimation && init()}
-        onMouseleave={() => !props.isAnimation && stopAnimate()}>
+      >
         <div
           ref={contentRef}
           style={notiData.contentStyle}

src/views/courseware-list/component/book/index.module.less

@@ -63,7 +63,7 @@
 
   .wrapItem {
     position: relative;
-    padding: 20px 30px;
+    padding: 30px 30px;
     height: 100%;
     overflow: hidden;
     z-index: 2;
@@ -71,7 +71,7 @@
 
   .item {
     display: flex;
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 600;
     color: #333;
     line-height: 20px;
@@ -80,6 +80,9 @@
   }
   .name {
     width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
   }
   .des {
     line-height: 16px;

src/views/courseware-list/component/book/index.tsx

@@ -98,14 +98,14 @@ export default defineComponent({
             console.log('e:', e)
             console.log('page:', page)
             console.log('view:', view)
+
             // book.turn('page', page.next);
           }
         }
       });
-      // book.turn("peel", 'br')
 
-    };
 
+    };
     const getRect = () => {
       const bookWrap = document.querySelector(
         '.bookWrap'
@@ -195,6 +195,8 @@ export default defineComponent({
       }
       data.list = list;
       // console.log('🚀 ~ data.list:', data.list.length);
+      // console.log(book.turn.pages, 'book.turn.pages')
+      // console.log(book.turn('pages'), 'pages')
     };
     watch(
       () => props.show,
@@ -248,12 +250,18 @@ export default defineComponent({
         // });
       }
     };
+
+    const isStartAnimate = (item: any) => {
+      // console.log(item) item.name.length > 9 ? true :
+
+      return false
+    }
     return () => (
-      <div class={[styles.book, data.show ? '' : styles.bookHide]}>
+      <div class={[styles.book, data.show ? '' : styles.bookHide]} onClick={handleClose}>
         <div class={styles.back} onClick={handleClose}>
           <img src={icon_back} />
         </div>
-        <div class="bookWrap" style={{ width: data.width + 'px' }}>
+        <div class="bookWrap" style={{ width: data.width + 'px' }} >
           {!!data.list.length && (
             <div id="flipbook" class={[data.show && 'animated']}>
               <div class="page">
@@ -279,9 +287,6 @@ export default defineComponent({
                                   e.stopPropagation();
                                   handleOpenPlay(item);
                                 }}
-                                onTouchmove={(e) => {
-                                  isHandMove.value = true
-                                }}
                               >
                                 {item.id ? (
                                   <img
@@ -293,12 +298,13 @@ export default defineComponent({
                                 <div
                                   class={styles.name}
                                   style={{ lineHeight: '20Px' }}>
-                                  <TheNoticeBar text={item.name} ></TheNoticeBar>
+                                  {item.name}
+                                  {/* <TheNoticeBar text={item.name} isAnimation={isStartAnimate(item)}></TheNoticeBar> */}
                                   {data.lastTime === item.id && (
                                     <span class={styles.last}>上次观看</span>
                                   )}
                                 </div>
-                              </div>
+                              </div >
                             </>
                           );
                         })}
@@ -318,7 +324,7 @@ export default defineComponent({
           )}
         </div>
         {showGuide.value ? <CoursewareDetail></CoursewareDetail> : null}
-      </div>
+      </div >
     );
   }
 });