Vue JS animation/transition effect on specific v-for item text on function call - vuejs2

Question

I would like to create a transition/animation effect from a method where the text changes upon firing an event (not created) customTextAnim(key) which works independently for each of the v-for items.
When run, the text appears larger (22px), then shrinks to the normal 14px size after about a .3 second animation.
The text I would like to animate starts out 1t 14px, then jumps to 22px and shrinks back down to 14px. This is the text i would like to animate this.auctions[key].username*
I have literally no idea how to do this, i really need all the help i can get
<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);
}
};

Answer 1

Not the complete solution. It's just the idea that I'm providing here. You can add the styles of transition. I hope that can guide you
Template:
<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>
ViewModel
data: {
items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
nextNum: 10
},
methods: {
add: function() {
this.items.push(this.nextNum++);
}
}
Style
.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
}