Vuejs2 函数调用时特定v-for项文本上的Vue JS动画/转换效果

我想从一种方法中创建一个过渡/动画效果，在该方法中，文本在触发事件（未创建）customTextAnim（关键点）时发生变化，该方法对每个v-for项独立工作

运行时，文本看起来更大（22px），然后在大约0.3秒的动画后缩小到正常的14px大小

我想制作动画的文本从1t14px开始，然后跳到22px，然后缩小到14px。这是我想制作动画的文本。拍卖[key]。用户名*

我真的不知道怎么做，我真的需要所有能得到的帮助

<template>

<div>
    <h1>Live Auctions {{ unixTime }}</h1>
    <button @click="tempSetAuction()">set auctions</button>
    <button @click="tempClearAuction()">CLEAR ALL</button>
    <div style="clear:both;"></div>
    <br /><br />

    <ul class="row">
        <li class="col-lg-4" v-for="(auction, key, index) in auctions" :key="auction.id">
            <div><span>{{ auction.name }} ({{ auction.id }})</span><br /></div>
            <div>END TIME: <span class="end-time" ref="endTime">{{ auction.endtime }}</span><br /></div>

            <div>TIME LEFT: <span class="bid-seconds" ref="bidTimeSeconds">{{ auction.time_left }}</span><br /></div>

            <div>BID TIME: <span class="bid-time" ref="bidTime"></span><br /></div>
            <br />
                <span ref="serverTime">{{ auction.date_now }}</span><br /><!---->
            <span ref="totalBids">{{ auction.total_bids }}</span><br />
            <span ref="user">{{ auction.username }}</span><br />
            <div ref="newBid" class="button">
                <button @click="bidOnThis(auction.id, key)">Bid on this item</button>
            </div>
            <button @click="countDown()">Countdown</button><br /><br />
            <hr />
        </li>
    </ul>
</div>
</template>

<script>
export default {
    //  Probably remove this
    props : {
        items: []
    },

    data() {
        return {
            auctions: [],
                newBid: '',
                totalBids: '',
            user: [],
                bidTimeArray: [],
            unixTime: '',
            timeToUpdate: '0',
            textEnded: 'Ended',
            show: true
        };
    },

    created() {

        axios.get('/timenow').then(result => {
            this.unixTime = result.data;
        });
        axios.get('/auctions').then(result => {
            //  Set up the remaining seconds for each auction on load
            this.auctions = result.data;
            for (let i = 0; i < this.auctions.length; i++){
                this.bidTimeArray[i] = this.auctions[i].bid_time -1;
                if(this.auctions[i].endtime <= this.unixTime){
                    this.auctions[i].time_left = this.textEnded;
                    this.auctions[i].bidTime = this.textEnded;
                } else {
                    this.auctions[i].time_left = this.auctions[i].endtime - this.unixTime;
                }
            }
        });
        axios.get('/getuser').then(result => {
            this.user = result.data;
        });
    },

    methods: {
        _padNumber: number =>  (number > 9 || number === 0) ? number : "0" + number,
        _readableTimeFromSeconds: function(seconds) {
            const hours = 3600 > seconds ? 0 : parseInt(seconds / 3600, 10);
            return {
                hours: this._padNumber(hours),
                seconds: this._padNumber(seconds % 60),
                minutes: this._padNumber(parseInt(seconds / 60, 10) % 60),
            }
        },

        bidOnThis(id, key) {
            if(this.$refs.bidTimeSeconds[key].innerHTML >= 0){
                axios.post('/auctions', { id: id, key: key });
                //alert(+this.bidTimeArray[key] + +this.unixTime);
                this.auctions[key].endtime = +this.bidTimeArray[key] + +this.unixTime;
                this.auctions[key].total_bids = parseInt(this.auctions[key].total_bids) + 1;
                //this.$refs.totalBids[key].innerHTML = parseInt(this.$refs.totalBids[key].innerHTML) + 1 ;
                this.auctions[key].username = this.user.username ;
            }

        },
        countDown(){
            this.unixTime = this.unixTime+1;
            this.timeToUpdate = this.timeToUpdate+1;
            if(this.timeToUpdate >= 60){
                this.timeToUpdate = 0;
                axios.get('/timenow').then(result => {
                    this.unixTime = result.data;
                    //console.log('Just updated the time');
                });
            }
            if(this.auctions.length >0){
                for (let i = 0; i < this.auctions.length; i++){
                    if(typeof this.auctions[i].time_left == 'number' && this.auctions[i].endtime >= this.unixTime){
                        //if(this.auctions[i].endtime <= this.unixTime){
                        this.auctions[i].time_left = this.auctions[i].endtime - this.unixTime;
                        var newTime = parseInt(this.$refs.bidTimeSeconds[i].innerHTML);
                        this.$refs.bidTime[i].innerHTML  = this._readableTimeFromSeconds(newTime).minutes+ ':'+this._readableTimeFromSeconds(newTime).seconds;
                    } else {
                        this.$refs.bidTime[i].innerHTML = this.textEnded;
                        this.$refs.newBid[i].innerHTML = '';
                    }
                }
            }
        },
        tempSetAuction(){
            axios.get('/auctions/set').then(result => {
            });
        },
        tempClearAuction(){
            axios.get('/auctions/clear').then(result => {
            });
        }


    },

    mounted: function () {
        window.setInterval(() => {
            this.countDown();
        },1000);
    }
};

现场拍卖{{unixTime}
集合拍卖
清除所有





{{auction.name}（{{auction.id}}）

结束时间：{{auction.endtime}}

剩余时间：{{auction.TIME_LEFT}}

投标时间：



{{auction.date_now}}

{{auction.total_bids}}

{{auction.username}}

对这个项目投标
倒计时





导出默认值{
//可能把这个去掉
道具：{
项目：[]
},
数据（）{
返回{
拍卖：[]，
新ID:“”，
总出价：''，
用户：[]，
bidTimeArray:[]，
unixTime:“”，
timeToUpdate:“0”，
textEnded:'Ended'，
秀：真的
};
},
创建（）{
get（'/timenow'）。然后（结果=>{
this.unixTime=result.data；
});
get（'/auctions'）。然后（result=>{
//设置每次加载拍卖的剩余秒数
this.auctions=result.data；
for（设i=0；i（编号>9 | |编号===0）？编号：“0”+编号，
_readableTimeFromSeconds:函数（秒）{
常数小时=3600>秒？0:parseInt（秒/3600，10）；
返回{
小时数：此编号（小时数），
秒数：此焊盘编号（秒数%60），
分钟数：这个。u焊盘编号（秒/60，10）%60），
}
},
双月本（id，键）{
if（此.$refs.bidTimeSeconds[key].innerHTML>=0）{
post（'/auctions'，{id:id，key:key}）；
//警报（+this.bidtimerary[key]++this.unixTime）；
this.auctions[key].endtime=+this.bidtimerary[key]+this.unixTime；
this.auctions[key].total_bids=parseInt（this.auctions[key].total_bids）+1；
//this.$refs.totalBids[key].innerHTML=parseInt（this.$refs.totalBids[key].innerHTML）+1；
this.auctions[key].username=this.user.username；
}
},
倒计时{
this.unixTime=this.unixTime+1；
this.timeToUpdate=this.timeToUpdate+1；
如果（this.timeToUpdate>=60）{
this.timeToUpdate=0；
get（'/timenow'）。然后（结果=>{
this.unixTime=result.data；
//log（'刚刚更新了时间'）；
});
}
如果（this.auctions.length>0）{
for（设i=0；i=this.unixTime的类型）{
//if（this.auctions[i].endtime{
});
},
临时拍卖{
get（'/auctions/clear'）。然后（result=>{
});
}
},
挂载：函数（）{
window.setInterval（（）=>{
这是倒计时（）；
},1000);
}
};

---

不是完整的解决方案。这只是我在这里提供的想法。您可以添加过渡样式。我希望这可以指导您

模板：

<div id="list-demo">
    <button v-on:click="add">Add</button>
    <transition-group name="list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
    </transition-group>
</div>

风格

.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}

.list-enter, .list-leave-to
/* .list-leave-active below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px); //Enter your transition transforms here
}

---

感谢您的快速响应，我是否可以将

放置在过渡组中，然后仅参考内部？在良好睡眠后再次查看此内容-看起来这只是将一个项目推送到数组中，这不是我需要的。我需要访问一个项目，并使用有效的方式更改文本。这是d的正确方式o我所追求的OP中描述的动画

.list-item {
  display: inline-block;
  margin-right: 10px;
}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}

.list-enter, .list-leave-to
/* .list-leave-active below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(30px); //Enter your transition transforms here
}