css3 平滑过渡动画效果_轻松平滑地过渡动画编号

最新推荐文章于 2022-04-07 11:18:22 发布

cuk5239

最新推荐文章于 2022-04-07 11:18:22 发布

阅读量876

点赞数

文章标签： vue css html css3 less ViewUI

原文链接：https://vuejsexamples.com/a-smoothly-transitions-animation-numbers-with-ease/

版权

Vue-Odometer是一个用于数字平滑过渡的JavaScript和CSS库，利用CSS转换实现高性能动画。在旧版浏览器上自动回退。安装时需注意可能的AMD模块导出问题。可以通过ES6/ES2015或ES5的方式在Vue项目中引入并使用。

摘要由CSDN通过智能技术生成

css3 平滑过渡动画效果

Vue里程表 (Vue-Odometer)

Smoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on numbers.

轻松平滑地过渡数字。使用此库可为您的应用程序提供平滑的动画，仅适用于数字。

Odometer is a Javascript and CSS library for smoothly transitioning numbers.

里程表是用于平稳过渡数字的Javascript和CSS库。

Odometer's animations are handled entirely in CSS using transforms making them extremely performant, with automatic fallback on older browsers.

Odometer的动画完全通过CSS使用转换来处理，从而使其表现出色，并在旧版浏览器上自动回退。

View demo 查看演示 Download Source 下载源

安装 (Installation)

npm install v-odometer

注意 (NOTE)

If you are getting the error of "Unknown Odometer keyword", this means that you are missing odometer library in your application, simply because the Odometer library is not yet exported as an AMD module and still only a commenJS file (refer to: AMD exporting issues). However if you are not building your applciation in a webpack envirment or similar, and you include VueJS file from a public cdn, then you are fine to include the ./v-odometer/dist/main.prod.js, the Vue will be public in your window there for this component will be automatically integrated as a global component and you can simply use it directly insidde your html file:

如果收到“未知Odometer关键字”错误，则意味着您的应用程序中缺少odometer库，这仅仅是因为Odometer库尚未导出为AMD模块，而仍然仅是commenJS文件(请参阅： AMD导出)问题 )。但是，如果您不是在Webpack或类似环境中构建应用程序，并且包含来自公共CDN的VueJS文件，则可以将./v-odometer/dist/main.prod.js包括./v-odometer/dist/main.prod.js ，那么Vue将是在您窗口的public那里，此组件将自动集成为全局组件，您可以直接使用它直接插入html文件：

...
	<vue-odometer :value="myValue"></vue-odometer>
	...

用法 (Usage)

ECMAScript 6(ES6)/ ECMAScript 2015(ES2015) (ECMAScript 6 (ES6)/ ECMAScript 2015 (ES2015))

To cherry pick the component, start by importing it in the file where it is being used:

要挑选组件，请先将其导入使用文件中：

import VueOdometer from 'vue-odometer/src'

Then add it to your component definition:

然后将其添加到您的组件定义中：

Vue.component('my-component', {
    components: {
        'vue-odometer': VueOdometer
    }
    // ...
})

Or register it globally:

或在全球注册：

Vue.component('vue-odometer': VueOdometer);

ECMAScript 5(ES5) (ECMAScript 5 (ES5))

...
<head>
	<!-- Metas -->
	<meta name="title" content="v-odometer">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="keywords" content="">
	<title>Odometer - VueJS component</title>
	<!-- include this style file, it contains all the themes provided from odometer -->
	<link rel="stylesheet" href="./your/path/to/main.css">
	<!-- don't forget to include the odometer library -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.js"></script>
	<!-- then load this component -->
	<script type="text/javascript" src="./your/path/to/main.prod.js"></script>
</head>
<body>
	<div id="app">
		...
		<vue-odometer :value="mynumber" class="myClassName"></vue-odometer>
		...
	</div>
</body>
...

var app = new Vue({
	data: {
		mynumber: ""
	}
})

翻译自: https://vuejsexamples.com/a-smoothly-transitions-animation-numbers-with-ease/

css3 平滑过渡动画效果

cuk5239

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 平滑过渡动画效果_轻松平滑地过渡动画编号

css3 平滑过渡动画效果 Vue里程表 (Vue-Odometer)Smoothly transitions numbers with ease. Use this library to give you application a smooth animation, only applicable on numbers. 轻松平滑地过渡数字。使用此库可为您的应用程序提供平滑的动画，仅适用...
复制链接

扫一扫