Vue.js 过渡

Posted shi_zi_183

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 过渡相关的知识,希望对你有一定的参考价值。

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>

以上是关于Vue.js 过渡的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 过渡

Vue.js 过渡

vue.js基础知识篇:过渡Method和Vue实例方法

Vue.js 教程 : 过渡动画

Vue.js 过渡 & 动画

Vue.js进入/离开 & 列表过渡