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

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

项目仓库地址,欢迎 Star


实现效果

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


功能实现

  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>
    

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

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

    唱片旋转动画 通过 css3keyframes 实现

    其他代码不变,只更新 .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);
      }
    }
    

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

  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>
    

总结

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

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


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

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

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


项目仓库地址,欢迎 Star。

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

你可能感兴趣的:(Vue,实战系列,css,html,css3,vue,js)