使用 Vue 实现 CSS 过渡与动画效果

最新推荐文章于 2022-08-09 09:16:55 发布
最新推荐文章于 2022-08-09 09:16:55 发布
阅读量520 收藏 3
点赞数 1
分类专栏： Vue3学习笔记 文章标签： css 动画 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34771938/article/details/120649060
版权

一、基础使用

  • 通过 class 实现。
  • 动画
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    /* 动画 */
    @keyframes rightToLeft {
      0% {
        transform: translateX(100px);
      }
      50% {
        transform: translateX(50px);
      }
      100% {
        transform: translateX(0);
      }
    }
    .animation {
      animation: rightToLeft 3s;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return { 
          animate:{
            animation: false
          }
        };
      },
      methods:{
        handleClick(){
          this.animate.animation = !this.animate.animation;
        }
      },
      template: `
        <div :class='animate'>666666</div>
        <button @click=handleClick>动起来</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

  • 过渡
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    /* 过渡 */
    .transition {
      transition: background-color 3s ease;
    }

    .blue {
      background-color: blue;
    }

    .green {
      background-color: green;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          transition: {
            transition: true,
            blue: true,
            green: false
          }
        };
      },
      methods: {
        handleClick() {
          this.transition.blue = !this.transition.blue;
          this.transition.green = !this.transition.green;
        }
      },
      template: `
        <div :class='transition'>666666</div>
        <button @click=handleClick>变色</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

  • 通过 class 与 style 共同实现过渡
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    /* 过渡 */
    .transition {
      transition: background-color 3s ease;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          styleObj: {
            backgroundColor: 'blue'
          }
        };
      },
      methods: {
        handleClick() {
          if (this.styleObj.backgroundColor === 'blue') {
            this.styleObj.backgroundColor = 'green';
          } else {
            this.styleObj.backgroundColor = 'blue'
          }
        }
      },
      template: `
        <div class='transition' :style='styleObj'>666666</div>
        <button @click=handleClick>变色</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

二、使用 transition 标签实现

  • 过渡
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    /* 过渡 */
    /* 入场 */
    .v-enter-from {
      opacity: 0;
    }
    .v-enter-active {
      transition: opacity 3s ease-out;
    }
    .v-enter-to {
      opacity: 1;
    }
    /* 出场 */
    .v-leave-from {
      opacity: 1;
    }
    .v-leave-active {
      transition: opacity 3s ease-out;
    }
    .v-leave-to {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 单元素，单组件的入场出场动画
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        }
      },
      template: `
        <transition>
          <div v-if='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

  • 动画，修改 transition 的name属性
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    /* 动画 */
    @keyframes shake {
      0% {
        transform: translateX(100px)
      }
      50% {
        transform: translateX(50px)
      }
      100% {
        transform: translateX(0)
      }
    }
    /* 
      transition 设置了 name 属性后，这里的 
      v-leave-active 需要修改为 my-leave-active
    */
    .my-leave-active {
      animation: shake .5s;
    }
    .my-enter-active {
      animation: shake .5s;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        }
      },
      template: `
        <transition name='my'>
          <div v-if='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

三、自定义过渡 class 类名

  • 我们可以通过以下 attribute 来自定义过渡类名：
    • enter-from-class
    • enter-active-class
    • enter-to-class
    • leave-from-class
    • leave-active-class
    • leave-to-class
  • 他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css. 结合使用十分有用。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        }
      },
      template: `
        <transition 
          enter-active-class="animate__animated animate__bounceInRight"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <div v-show='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

四、动画和过渡一起进行

  • 通过 type 设置最终时长。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    @keyframes shake {
      0% {
        transform: translateX(50px)
      }

      50% {
        transform: translateX(25px)
      }

      100% {
        transform: translateX(0)
      }
    }

    .v-enter-to {
      color: red;
    }

    .v-leave-to {
      color: red;
    }

    .v-enter-active {
      animation: shake 10s;
      transition: color 3s ease-in;
    }

    .v-leave-active {
      animation: shake 10s;
      transition: all 3s ease-in;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        }
      },
      template: `
        <transition type="transition">
          <div v-show='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

  • 通过 duration 设置最终时长。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
  <style>
    @keyframes shake {
      0% {
        transform: translateX(50px)
      }

      50% {
        transform: translateX(25px)
      }

      100% {
        transform: translateX(0)
      }
    }

    .v-enter-to {
      color: red;
    }

    .v-leave-to {
      color: red;
    }

    .v-enter-active {
      animation: shake 3s;
      transition: color 1s ease-in;
    }

    .v-leave-active {
      animation: shake 3s;
      transition: all 1s ease-in;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        }
      },
      template: `
        <transition :duration="1000">
          <div v-show='show'>666666</div>
        </transition>
        <transition :duration="{ enter:500, leave:1500 }">
          <div v-show='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

五、使用 JavaScript 动画

  • 可以在 attribute 中声明 JavaScript 钩子
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  <!-- 关闭css动画 -->
  :css="false"
>
</transition>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
        handleBeforeEnter(el) {
          el.style.color = "red";
        },
        handleEnter(el, done) {
          const animation = setInterval(() => {
            const color = el.style.color;
            if (color === 'red') {
              el.style.color = 'green';
            } else {
              el.style.color = 'red';
            }
          }, 500)
          setTimeout(() => {
            clearInterval(animation);
            done();
          }, 3000)
        },
        handleAfterEnter(el) {
          el.style.color = "black";
          alert(666);
        },
        handleBeforeLeave(el) {
          el.style.backgroundColor = "red";
        },
        handleLeave(el, done) {
          const animation = setInterval(() => {
            const backgroundColor = el.style.backgroundColor;
            if (backgroundColor === 'red') {
              el.style.backgroundColor = 'green';
            } else {
              el.style.backgroundColor = 'red';
            }
          }, 500)
          setTimeout(() => {
            clearInterval(animation);
            done();
          }, 3000)
        },
        handleAfterLeave(el) {
          el.style.backgroundColor = 'white';
          alert(777);
        },
      },
      template: `
        <transition 
          :css="false"
          @before-enter="handleBeforeEnter"
          @enter="handleEnter"
          @after-enter="handleAfterEnter"
          @before-leave="handleBeforeLeave"
          @leave="handleLeave"
          @after-leave="handleAfterLeave"
        >
          <div v-show='show'>666666</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

六、多个单元素标签的切换

  • 可以设置 mode 改变过度模式，默认进入和离开是同时生效的。
  • in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in: 当前元素先进行过渡，完成之后新元素过渡进入。
  • 可以通过 appear attribute 设置节点在初始渲染的过渡。
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    .v-leave-to {
      opacity: 0;
    }

    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s ease-in;
    }

    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 多个单元素标签之间的切换
    const app = Vue.createApp({
      data() {
        return {
          show: true
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
      },
      template: `
        <transition mode='out-in' appear>
          <div v-if='show'>enter</div>
          <div v-else='show'>leave</div>
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

七、多个组件之间的过渡

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
  <style>
    .v-leave-to {
      opacity: 0;
    }

    .v-enter-from {
      opacity: 0;
    }

    .v-enter-active,
    .v-leave-active {
      transition: opacity 1s ease-in;
    }

    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 多个单组件之间的切换
    const ComponentA = {
      template: '<div>hello world</div>'
    }

    const ComponentB = {
      template: '<div>bye world</div>'
    }
    const app = Vue.createApp({
      data() {
        return { component: 'component-a' };
      },
      methods: {
        handleClick() {
          if (this.component === 'component-a') {
            this.component = 'component-b';
          } else {
            this.component = 'component-a';
          }
        },
      },
      components: {
        'component-a': ComponentA,
        'component-b': ComponentB,
      },
      template: `
        <transition mode='out-in' appear>
          <component :is="component" />
        </transition>
        <button @click=handleClick>切换</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

八、状态动画

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>使用 Vue 实现 CSS 过渡与动画效果</title>
</head>

<body>
  <div id="root">
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    // 状态动画
    const ComponentA = {
      template: '<div>hello world</div>'
    }

    const ComponentB = {
      template: '<div>bye world</div>'
    }
    const app = Vue.createApp({
      data() {
        return {
          num: 1,
          maxNum: 10
        };
      },
      methods: {
        handleClick() {
          if (this.num < this.maxNum) {
            const animation = setInterval(() => {
              this.num++;
              if (this.num === this.maxNum) {
                clearInterval(animation);
              }
            }, 100);
          }
        },
      },
      template: `
        <div>{{num}}</div>
        <button @click=handleClick>增加</button>
      `
    });
    const vm = app.mount('#root');
  </script>
</body>

</html>

小豪boy
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中的过渡、动画、动态组件
nerao的博客
05-28 864
过渡与动画 vue中实现过渡或是动画一共提供了这样四种形式： 在 CSS 过渡和动画中自动应用 class – 自己写css3动画 可以配合使用第三方 CSS 动画库，如 Animate.css – 别人写好了类名，我们用 在过渡钩子函数中使用 JavaScript 直接操作 DOM – 自己用原生...
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
10-15
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡
Vue过渡效果之CSS过渡
weixin_33756418的博客
08-18 130
前面的话 　　Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。本文将从CSS过渡transition、CSS动画animation及配合使用第三方CSS动画库(如animate.css)这三方面来详细介绍Vue过渡效果之CSS过渡   引入 　　以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果，则如下所示 &lt;div id="demo"&gt...
vue2.0中css过渡动画总结
玄沉
06-26 3578
vue2.0中css过渡动画总结vue.2.0中的过渡动画利用自身的transition组件实现，有四种情形可以实现过渡效果 利用v-if渲染元素时 利用v-show展示或者隐藏元素时应用过渡生效 动态组件(把几个组件挂载到一个父节点上，在父节点绑定变量来决定显示哪个子组件) 组件根节点 过渡有两种总的状态：即enter(过渡开始)和leave(过渡结束) 这两中状态再细分，可分出6种状态，对应6
Vue过渡动画
新生代农民工
01-13 441
vue在插入、更新或者移除DOM时，提供多种不同方式地应用过渡效果。 在css过渡和动画中自动应用class 可以配合使用第三方动画库，如Animate.css 在过度钩子函数中使用JavaScript直接操作DOM 可以配合使用第三方JavaScript动画库，如Velocity.js Vue提供了transition的封装组件，可以给任何元素和组件添加进入/离开过渡 条件渲染（使用 v-if） 条件展示（使用v-show） 动态组件 组件根节点 就是用transtion组件包裹，在执行创建销毁，
Vue运用transition实现过渡动画
10-17
Vue中的过渡动画主要依赖于`<transition>`组件，它可以应用在元素、组件或动态组件上，配合CSS动画或者JavaScript钩子函数，实现各种复杂的过渡效果。在本篇文章中，我们将深入探讨如何使用`<transition>`来实现过渡...
vue元素实现动画过渡效果
12-10
虽然Vue的CSS过渡功能强大，但有时可能需要更复杂的动画效果，这时可以结合使用JavaScript库，如GSAP（GreenSock Animation Platform）或Animate.css。通过监听Vue的生命周期事件，可以精确控制动画的开始和结束，...
web前端vue之CSS过渡效果示例
08-28
Vue 会在适当的时机触发 CSS 过渡或者动画，你也可以提供相应的 JavaScript 钩子函数在过渡过程中执行自定义的 DOM 操作。 每个过渡效果，都需要在目标元素上使用 transition 特性。例如：显示</div> transition 的...
vue实现列表滚动的过渡动画
11-20
在本例中，我们将讨论如何使用Vue实现列表滚动的过渡动画。这种动画效果在滚动列表时为用户体验增加了动态感，使得滚动更加平滑和吸引人。 首先，我们要了解实现这种过渡动画的基本原理。在滚动过程中，我们需要...
Vue过渡效果 && 动画
HelloWord182的博客
06-26 181
使用形式 在 CSS 过渡和动画中自动应用 class <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="../../Vue@2.6.10.js">&l...
Vue中CSS动画原理的实现
01-19
下面这段代码，是点击按钮实现hello world显示与隐藏 <div id=root> <div v-if=show>hello world</div> <button @click=handleClick>按钮</button> </div> let vm = new Vue({ el: '#root', data: { show:true }, methods: { handleClick(){ this.show = !this.show } } }) 此时有一个需求，希望是在显示与隐藏时，能实现渐隐渐现的
vue使用css3动画和过渡使用animate.css
weixin_50462008的博客
12-27 968
在Vue里面使用css3动画和过渡效果 <transition>组件 属性:name 用来生成css过渡类名 例子如果你使用了 <transition name="fade">，那么 v-enter 会替换为 fade-enter 6个时机 v-enter :开始进入 v-enter-after:进入中的过程 v-enter-to:进入完毕 v-leave :准备离开 v-leave-active: 离开的过程 v-leave-to :离开完毕 v-enter-active 和 v
Vue3官网-过度&动画（九）transition&animation、ease-out,cubic-bezier、过渡class enter-from JavaScript 钩子 过渡模式out-i
qq_43456781的博客
09-22 898
Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡class（v-enter-from，v-enter-active）、JavaScript 钩子、过渡模式（out-in） 文章目录Vue3官网-过度&漫画（一）过渡 & 动画概述（transition & animation）、ease-in,ease-out,cubic-bezier、过渡clas
VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合自学
追风人的博客
02-18 681
目录 1. 概述 2.动画与过渡 3. 综述 4. 个人公众号 1. 概述 光环效应告诉我们： 当一个人在某一方面取得了巨大的成功，人们就会给他贴上正面的标签，这个人从此就被“优秀”的光环所笼罩，他做的一切，人们都认为是正确的。 例如：越是名气大的明星代言的商品，买的人就越多。 反之亦然，当一个人在某一方面失败了，往往就会被贴上负面的标签，从此被“失败”的“光环”所笼罩，他做的一切，周围人都认为是错误的。 例如：一个人第一次做生意就失败了，则这个人再做什么决策，他的朋友都认为是错误的
html做人脸识别 博客,一个人脸识别+特效的小例子
weixin_42113456的博客
06-07 331
模拟了一个时下流行的人脸贴图效果. 直接使用的某app里面的资源,如果利益相关人士不喜, 请在下方留言, 博主看见后将及时删除相关图片资源.demo 使用了FaceTracker(https://github.com/kylemcdonald/FaceTracker) 做人脸识别, 博主对FaceTracker做了简单的封装, 之后使用EGE 创建窗口, 调用OpenCV的接口启动了系统相机(如果...
如何在基于vue-cli的项目中，使用精灵图 css sprite
NewTyun的博客
08-24 945
新钛云服已为您服务1236天CSS Sprites通常被称为css精灵图，在国内也被意译为css图片整合和css贴图定位，也有人称他为雪碧图。就是将多张比较小的图片有规则的合并成一张背景图...
6张脑图带你了解Vue3中的过渡和动画 | 附高清原图
LuckyWinty的博客
09-07 282
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言????最近重新夯实Vue3，梳理的相关知识点和细节????目前进度：第1部分：**基础**[2] ✔第2部分：**深入组件*...
vue中使用过渡动画失效的问题
mrqi122的博客
08-09 1844
例如 定义了 transform: translateX(-50%);，在 vue过渡中在使用transform: translateX(-50%)将失效。只有去掉css 中的transform: translateX(-50%);定义css 属性，再vue中定义过渡属性动画失效（opatcity除外）
Vue中实现过渡动画
m0_71485750的博客
08-09 3214
目前为止，过渡动画我们只要是针对单个元素或者组件的：要么是单个节点；要么是同一时间渲染多个节点中的一个；那么如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行呢？这个时候我们要使用组件来完成；使用有如下的特点：默认情况下，它不会渲染成任何一个元素，但是你可以指定一个元素并以 tag attribute 让他进行渲染；过渡模式不可用，因为我们不再相互切换特有的元素；...
使用Vue和CSS实现过渡动画
最新发布
05-26
下面是一个使用Vue和CSS实现过渡动画的示例： ```html !show">Toggle <p v-if="show">Hello, World! .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值