anime 数字跳动效果

最新推荐文章于 2022-12-14 23:30:06 发布

一只敲码的猫~

最新推荐文章于 2022-12-14 23:30:06 发布

阅读量156

点赞数

分类专栏： vue es6 JavaScript 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_38946996/article/details/127988175

版权

vue 同时被 3 个专栏收录

105 篇文章 2 订阅

订阅专栏

es6

78 篇文章 2 订阅

订阅专栏

JavaScript

52 篇文章 1 订阅

订阅专栏

<template>
    <div class="title">直接变化变量中的对象</div>
    <div class="amine-box">
        {{ TestNumber }}
    </div>
    <br><br>
</template>
<script setup>
import { ref, onUnmounted } from 'vue';
import anime from 'animejs'

const TestNumber = ref(0);

// 因为不需要获取Dom元素，所以不需要在 onMounted 后执行
let AniObj = anime({
    // 需要变化的对象
    targets: TestNumber,
    // 需要变化的值
    value: 100,
    // 持续时间
    duration: 3000,
    // 变化值的精度（-log值）
    round: 10,
    // 动画曲线
    easing: 'linear',
    endDelay: 1000,
    loop: true,
});

onUnmounted(() => {
    // 目前 Anime 没有释放缓存的办法，
    // 只能停止动画
    AniObj.pause();
})
</script>
<style lang="less" scoped>
.title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 16px;
    border-bottom: 1px solid #999;
}

.amine-box {
    width: 100%;
    height: 50px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.1);
    line-height: 50px;
    text-align: center;
}
</style>