Vue.js 实战系列之实现视频类WebApp的项目开发——7. 点赞评论分享以及唱片旋转动画

如果想看该实战系列的其他内容，请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发。

项目仓库地址，欢迎 Star

---

实现效果

---

功能实现

1. 点赞评论分享以及唱片组件创建

   创建 RightBar.vue

   <template>
     <div class="right-bar">
       <div class="bar-item">
         <div class="author-item">
           <img src="@/assets/images/author.png" alt="" class="author-img" />
           <img src="@/assets/images/icon/guanzhu.png" alt="" class="guanzhu" />
         </div>
       </div>
       <div class="bar-item">
           <div class="item-icon">
               <span class="iconfont icon-xin"></span>
               <p>95.9w</p>
           </div>
       </div>
       <div class="bar-item">
           <div class="item-icon">
               <span class="iconfont icon-pinglun1"></span>
               <p>285</p>
           </div>
       </div>
       <div class="bar-item">
           <div class="item-icon">
               <span class="iconfont icon-fenxiang"></span>
               <p>3072</p>
           </div>
       </div>
       <div class="bar-item">
         <div class="item-music">
           <img src="@/assets/images/music_avatar.png">
         </div>
       </div>
     </div>
   </template>
   
   <style lang="less" scoped>
   .right-bar {
     width: 70px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     .bar-item {
       height: 70px;
       .author-item {
         width: 60px;
         height: 60px;
         border-radius: 50%;
         position: relative;
         text-align: center;
         display: flex;
         justify-content: center;
         align-items: center;
         .author-img {
           width: 58px;
           height: 58px;
           border-radius: 50%;
           border: 3px solid #fff;
         }
         .guanzhu {
           position: absolute;
           left: 14px;
           bottom: -20px;
         }
       }
       .item-icon {
           font-size: 15px;
           margin-top: 20px;
           text-align: center;
           .iconfont {
               font-size: 30px;
           }
           p {
               margin-top: 0;
           }
       }
       .item-music {
         height: 54px;
         width: 54px;
         line-height: 54px;
         background: #2e2e2e;
         border-radius: 50%;
         margin-top: 20px;
         display: flex;
         justify-content: center;
         align-items: center;
         img {
           width: 30px;
           height: 30px;
           border-radius: 50%;
         }
       }
     }
   }
   </style>
   

   实现效果：
   

2. 实现唱片旋转动画效果

   唱片旋转动画 通过 css3 的 keyframes 实现

   其他代码不变，只更新 .music-item 部分代码

   .item-music {
     height: 54px;
     width: 54px;
     line-height: 54px;
     background: #2e2e2e;
     border-radius: 50%;
     margin-top: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
     animation: record 6s linear infinite;
     img {
       width: 30px;
       height: 30px;
       border-radius: 50%;
     }
   }
   
   @keyframes record {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
   }
   

   实现效果：
   

3. 实现点赞效果

   需要注意的是要阻止默认事件。

   以下代码只是部分代码，完整代码见 Github

   // 点赞按钮
   <div class="bar-item">
       <div class="item-icon">
           <span class="iconfont icon-xin" :class="isLike ? 'active' : ''" @click.stop="toggleLike($event)"></span>
           <p>95.9w</p>
       </div>
   </div>
   
   // 点赞事件
   <script>
   export default {
     data() {
       return {
         isLike: false,
       };
     },
     methods: {
       toggleLike(e) {
         // 阻止默认事件
         e.preventDefault();
         this.isLike = !this.isLike;
       },
     },
   };
   </script>
   
   // 点赞样式
   <style lang="less" scoped>
   .active {
     color: rgb(253, 83, 21);
   }
   </style>
   

---

总结

本章节内容不多，主要是通过 css3 的 keyframes 来实现唱片旋转的效果。

也要注意一下点赞效果的默认事件的处理。

---

上一章节： 6. 首页视频详情实现

下一章节： 8. 视频自动播放和播放与暂停

项目整体介绍：Vue.js 项目实战之实现视频播放类WebApp的项目开发（仿抖音app）

---

项目仓库地址，欢迎 Star。

有任何问题欢迎评论区留言讨论。