Vue.js 过渡

最新推荐文章于 2024-03-13 17:19:54 发布

shi_zi_183

最新推荐文章于 2024-03-13 17:19:54 发布

阅读量302

点赞数

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

本文链接：https://blog.csdn.net/shi_zi_183/article/details/122466557

版权

vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

Vue.js 过渡

Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：

数字和运算
颜色的显示
SVG 节点的位置
元素的大小和其他的 property
这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。

状态动画与侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="../minified/gsap.min.js"></script>
</head>
<body>
    <div id="animated-number-demo">
        <input v-model.number="number" type="number" step="20">
        <p>{{animatedNumber}}</p>
    </div>
</body>
<script>
    new Vue({
        el: '#animated-number-demo',
        data: {
            number: 0,
            tweenedNumber: 0
        },
        computed: {
            animatedNumber: function(){
                return this.tweenedNumber.toFixed(0)
            }
        },
        watch: {
            number: function(newValue){
                gsap.to(this.$data,{ duration:0.5, tweenedNumber: newValue })
            }
        }
    })
</script>
</html>

在这里插入图片描述

shi_zi_183

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js 过渡

Vue.js 过渡Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如：数字和运算颜色的显示SVG 节点的位置元素的大小和其他的 property这些数据要么本身就以数值形式存储，要么可以转换为数值。有了这些数值后，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。状态动画与侦听器<!DOCTYPE html><html lang="en"><head> &l
复制链接

扫一扫