优化评论打开动画

src/components/Comment.vue

@@ -7,6 +7,7 @@
       :show-heng-gang="false"
       maskMode="light"
       :height="height"
+      tag="comment"
       mode="white">
     <template v-slot:header>
       <div class="title">
@@ -279,6 +280,7 @@ export default {
     },
     cancel() {
       this.$emit("update:modelValue", false)
+      this.$emit("close")
     },
     toggleCall(item) {
       item.select = !item.select

src/components/dialog/FromBottomDialog.vue

@@ -28,6 +28,7 @@
 </template>
 <script>
 import Dom from "../../utils/dom";
+import bus, {EVENT_KEY} from "@/utils/bus";
 
 export default {
   name: "FromBottomDialog",
@@ -63,6 +64,10 @@ export default {
       type: String,
       default: '5rem 5rem 0 0'
     },
+    tag: {
+      type: String,
+      default: ''
+    }
   },
   watch: {
     modelValue(newVal) {
@@ -144,12 +149,13 @@ export default {
       if (this.$refs.dialog.scrollTop !== 0) return
       this.startLocationY = e.touches[0].pageY
       this.startTime = Date.now()
+      this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
     },
     move(e) {
       if (this.$refs.dialog.scrollTop !== 0) return
       this.moveYDistance = e.touches[0].pageY - this.startLocationY
       if (this.moveYDistance > 0) {
-        this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)
+        bus.emit(EVENT_KEY.DIALOG_MOVE, {tag: this.tag, e: this.moveYDistance})
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${this.moveYDistance}px,0)`)
       }
     },
@@ -164,9 +170,11 @@ export default {
       this.$setCss(this.$refs.dialog, 'transition-duration', `250ms`)
       if (Math.abs(this.moveYDistance) > clientHeight / 2) {
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,${clientHeight}px,0)`)
+        bus.emit('dialogEnd', {tag: this.tag, isClose: true})
         setTimeout(this.hide, 250)
       } else {
         this.$setCss(this.$refs.dialog, 'transform', `translate3d(0,0,0)`)
+        bus.emit(EVENT_KEY.DIALOG_END, {tag: this.tag, isClose: false})
         setTimeout(() => {
           this.$setCss(this.$refs.dialog, 'transform', 'none')
           // this.$setCss(this.$refs.dialog, 'transition-duration', `0ms`)

src/components/slide/BVideo.vue

@@ -13,7 +13,7 @@
     <img src="../../assets/img/icon/play-white.png" class="pause" v-if="!isPlaying">
     <div class="float" :style="{opacity: isUp?0:1}">
       <div :style="{opacity:isMove ? 0:1}" class="normal">
-        <template v-if="commentVisible">
+        <template v-if="!commentVisible">
           <ItemToolbar v-model:item="localItem"
                        :position="position"
                        v-bind="$attrs"
@@ -81,7 +81,6 @@ export default {
     ItemToolbar,
     ItemDesc
   },
-  inject: ['commentVisible'],
   provide() {
     return {
       // isPlaying: computed(() => this.status)
@@ -165,6 +164,7 @@ export default {
       progressBarRect: {},
       videoScreenHeight: 0,
       videoPoster: `?vframe/jpg/offset/0/w/${document.body.clientWidth}`,
+      commentVisible: false,
     }
   },
   mounted() {
@@ -224,14 +224,52 @@ export default {
     console.log('mounted')
     // bus.off('singleClickBroadcast')
     bus.on('singleClickBroadcast', this.click)
-    // bus.on(EVENT_KEY.TOGGLE_COMMENT, (e) => this.commentVisible = !this.commentVisible)
+    bus.on(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
+    bus.on(EVENT_KEY.DIALOG_END, this.onDialogEnd)
+    bus.on(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments)
+    bus.on(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments)
   },
   unmounted() {
     console.log('unmounted')
     bus.off('singleClickBroadcast', this.click)
-    // bus.off(EVENT_KEY.TOGGLE_COMMENT,)
+    bus.off(EVENT_KEY.DIALOG_MOVE, this.onDialogMove)
+    bus.off(EVENT_KEY.DIALOG_END, this.onDialogEnd)
+    bus.off(EVENT_KEY.OPEN_COMMENTS, this.onOpenComments)
+    bus.off(EVENT_KEY.CLOSE_COMMENTS, this.onCloseComments)
   },
   methods: {
+    onDialogMove({tag, e}) {
+      if (this.commentVisible && tag === 'comment') {
+        Utils.$setCss(this.$refs.video, 'transition-duration', `0ms`)
+        Utils.$setCss(this.$refs.video, 'height', `calc(30vh + ${e}px)`)
+      }
+    },
+    onDialogEnd({tag, isClose}) {
+      if (this.commentVisible && tag === 'comment') {
+        console.log('isClose', isClose)
+        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
+        if (isClose) {
+          this.commentVisible = false
+          Utils.$setCss(this.$refs.video, 'height', '100%')
+        } else {
+          Utils.$setCss(this.$refs.video, 'height', '30vh')
+        }
+      }
+    },
+    onOpenComments(id) {
+      if (id === this.item.id) {
+        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
+        Utils.$setCss(this.$refs.video, 'height', '30vh')
+        this.commentVisible = true
+      }
+    },
+    onCloseComments(id) {
+      if (this.commentVisible) {
+        Utils.$setCss(this.$refs.video, 'transition-duration', `300ms`)
+        Utils.$setCss(this.$refs.video, 'height', '100%')
+        this.commentVisible = false
+      }
+    },
     click(val) {
       if (this.item.id === val) {
         if (this.status === SlideItemPlayStatus.Play) {
@@ -314,6 +352,7 @@ export default {
   video {
     width: 100%;
     height: 100%;
+    transition: height .3s;
     /*position: absolute;*/
   }
 

src/components/slide/ItemToolbar.vue

@@ -2,6 +2,7 @@
 import BaseMusic from "../BaseMusic";
 import Utils from "../../utils";
 import {reactive,} from "vue";
+import bus, {EVENT_KEY} from "@/utils/bus";
 
 const props = defineProps({
   item: {
@@ -43,6 +44,10 @@ function attention(e) {
   }, 1000)
 }
 
+function showComments() {
+  bus.emit(EVENT_KEY.OPEN_COMMENTS, props.item.id)
+}
+
 </script>
 
 <template>
@@ -65,11 +70,11 @@ function attention(e) {
       </div>
       <span>{{ Utils.formatNumber(props.item.digg_count) }}</span>
     </div>
-    <div class="message mb2r" @click.stop="$emit('showComments')">
+    <div class="message mb2r" @click.stop="showComments">
       <img src="../../assets/img/icon/message.svg" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>
-    <div class="message mb2r" @click.stop="$emit('showComments')">
+    <div class="message mb2r" @click.stop="showComments">
       <img src="../../assets/img/icon/star-white.png" alt="" class="message-image">
       <span>{{ Utils.formatNumber(props.item.comment_count) }}</span>
     </div>

src/pages/slideHooks/index.vue

@@ -3,6 +3,7 @@
     <H v-model:index="state.baseIndex">
       <SlideItem>
         <IndicatorHome
+            v-if="!state.fullScreen"
             v-hide="state.isUp"
             :loading="state.loading"
             name="main"
@@ -54,7 +55,9 @@
       </SlideItem>
     </H>
   </div>
-  <Comment page-id="slideHook" v-model="state.commentVisible"/>
+  <Comment page-id="slideHook" v-model="state.commentVisible"
+           @close="closeComments"
+  />
 </template>
 
 <script setup lang="jsx">
@@ -73,7 +76,7 @@ import {useNav} from "../../utils/hooks/useNav";
 
 const nav = useNav()
 
-const videos = resource.videos.slice(0, 6).map(v => {
+const videos = resource.videos.slice(0, 16).map(v => {
   v.type = 'recommend-video'
   return v
 })
@@ -114,8 +117,9 @@ const state = reactive({
   shareToFriend: false,
 
   commentVisible: false,
+  fullScreen: false,
+  style: '100%'
 })
-provide('commentVisible', () => state.commentVisible)
 
 onMounted(() => {
   bus.on('singleClick', () => {
@@ -131,15 +135,25 @@ onMounted(() => {
       state.recommendVideos[itemIndex] = val.item
     }
   })
+
+  bus.on(EVENT_KEY.ENTER_FULLSCREEN, (e) => state.fullScreen = true)
+  bus.on(EVENT_KEY.EXIT_FULLSCREEN, (e) => state.fullScreen = false)
+  bus.on(EVENT_KEY.OPEN_COMMENTS, (e) => {
+    bus.emit(EVENT_KEY.ENTER_FULLSCREEN)
+    state.commentVisible = true
+  })
+  bus.on(EVENT_KEY.CLOSE_COMMENTS, (e) => {
+    bus.emit(EVENT_KEY.EXIT_FULLSCREEN)
+    state.commentVisible = false
+  })
   bus.on('nav', path => nav(path))
 })
 onUnmounted(() => {
   bus.offAll()
 })
 
-function test() {
-  state.commentVisible = true
-  bus.emit(EVENT_KEY.TOGGLE_COMMENT,)
+function closeComments() {
+  bus.emit(EVENT_KEY.CLOSE_COMMENTS)
 }
 
 function render(item, itemIndex, play, position) {
@@ -155,7 +169,6 @@ function render(item, itemIndex, play, position) {
         isPlay={false}
         item={item}
         position={{...position, itemIndex}}
-        onShowComments={test}
         onShowShare={e => state.isSharing = true}
         onGoUserInfo={e => state.baseIndex = 1}
     />

src/utils/bus.js

@@ -41,5 +41,10 @@ export default {
 export const EVENT_KEY = {
   ENTER_FULLSCREEN: 'ENTER_FULLSCREEN',
   EXIT_FULLSCREEN: 'EXIT_FULLSCREEN',
+  TOGGLE_FULLSCREEN: 'TOGGLE_FULLSCREEN',
   TOGGLE_COMMENT: 'TOGGLE_COMMENT',
+  OPEN_COMMENTS: 'OPEN_COMMENTS',
+  CLOSE_COMMENTS: 'CLOSE_COMMENTS',
+  DIALOG_MOVE: 'DIALOG_MOVE',
+  DIALOG_END: 'DIALOG_END',
 }