vue做30s倒计时，在最后10s倒数的时候有个放大的效果

Question

题目描述

vue做30s倒计时，在最后10s的时候有个放大的效果

题目来源及自己的思路

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
<template>
<div>

<p>{{second}}</p>

</div>

</template>

<script >
export default {

data () {  return {    seconds: 30
  }
},
mounted () {  this.add()
},methods: {  num: function (n) {    return n < 10 ? '0' + n : '' + n
  },  add: function () {    var _this = this
    var time = window.setInterval(function () {      if (_this.seconds === 0 ) {
        _this.seconds = 0
      } else if ( _this.seconds === 0) {
        _this.seconds = 0
        window.clearInterval(time)
      } else {
        _this.seconds -= 1
      }
    }, 1000)
  }
},computed: {  second: function () {    return this.num(this.seconds)
  },
}

}
</script>

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

html<p&nbsp;:class="{&nbsp;zoom:&nbsp;isZoom&nbsp;}">{{second}}</p>jsdata&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;seconds:&nbsp;30,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;isZoom:&nbsp;false &nbsp;&nbsp;&nbsp;&nbsp;}},methods:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;num:&nbsp;function&nbsp;(n)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.isZoom&nbsp;=&nbsp;n&nbsp;<=&nbsp;10&nbsp;&&&nbsp;n&nbsp;>&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;n&nbsp;<&nbsp;10&nbsp;?&nbsp;'0'&nbsp;+&nbsp;n&nbsp;:&nbsp;''&nbsp;+&nbsp;n &nbsp;&nbsp;&nbsp;&nbsp;}, &nbsp;&nbsp;&nbsp;&nbsp;... }css.zoom&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;animation:&nbsp;test&nbsp;1s&nbsp;infinite; } @keyframes&nbsp;test&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;from&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;14px; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;to&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;24px; &nbsp;&nbsp;&nbsp;&nbsp;} }