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 :class="{ zoom: isZoom }">{{second}}</p>

js

data () {    return {        seconds: 30,        isZoom: false
    }},

methods: {
    num: function (n) {        this.isZoom = n <= 10 && n > 0;        return n < 10 ? '0' + n : '' + n
    },
    ...
}

css

.zoom {    animation: test 1s infinite;
}
@keyframes test {    from {        font-size: 14px;
    }    to {        font-size: 24px;
    }
}