时间戳

首页 > 解决方案 > Vue JS动画/过渡效果对函数调用时特定v-for项目文本的影响

vuejs2 - Vue JS动画/过渡效果对函数调用时特定v-for项目文本的影响

问题描述

我想通过一种方法创建一个过渡/动画效果，其中文本在触发事件（未创建）时发生变化，customTextAnim(key)对每个v-for项目独立工作。

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

我想要动画的文本从 1t 14px 开始，然后跳转到 22px 并缩小到 14px。这是我想要动画this.auctions[key].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);
    }
};

标签： vuejs2laravel-5.6

解决方案

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

模板：

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

视图模型

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
}

推荐阅读