Vue JS动画/转换对函数调用中特定v-for项目文本的影响

Question

我想从一个方法中创建一个转换/动画效果，在该方法中，文本在触发事件(而不是创建) customTextAnim(key)时发生变化，该事件对每个v- for 项都独立工作。

运行时，文本看起来更大(22 .3 )，然后在大约.3第二次动画之后缩小到正常的14.3大小。

我想要动画的文本从1t14 to开始，然后跳到22 to，然后缩小到14 to。这是我想要给this.auctionskey.username*动画的文本

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

<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

不是完全的解决方案。这只是我在这里提供的想法。您可以添加转换的样式。我希望这能指引你

模板：

<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++);
  }
}

风格

.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
}