05.vue中js动画与Velocity.js的结合

vue中js动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue中js动画</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnte"
            @before-leave="handleBeforeEnter"
            @leave="handleEnter"
            @after-leave="handleAfterEnte"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
</body>
<script>
    // js动画的钩子函数
    // 入场动画对应的钩子函数enter
    // [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
    // 2.执行所有动画@enter,手动调用回调函数。告诉vue动画已经执行完了。
    // [email protected]enter动画结束后执行的函数。

    // 出场动画对应的钩子函数leave
    // @before-leave="handleBeforeEnter"
    // @leave="handleEnter"
    // @after-leave="handleAfterEnte"

    var vm = new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show;
            },
            handleBeforeEnter:function(el){
                el.style.color = ‘red‘;
                console.log(‘before-enter‘);
            },
            handleEnter:function(el,done){  // 2个参数
                // 所有的动画,2s后执行。
                setTimeout(()=>{
                    el.style.color = ‘green‘
                    // done(); // 手动调用回调函数。告诉vue动画已经执行完了。
                },2000);

                setTimeout(()=>{
                    done();  // 4s后结束动画。
                },4000);
            },
            handleAfterEnte:function(el){
                el.style.color = ‘#000‘;  // 红色-》绿色-》黑色
            }
        }

    })
</script>
</html>

js的常用动画库Velocity.js

Velocity.js 英文官网:http://velocityjs.org/

Velocity.js 中文文://www.mrfront.com/docs/velocity.js/index.html

<script src="https://cdn.jsdelivr.net/npm/[email protected]/velocity.min.js"></script>

使用Velocity.js动画库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js常用动画库Velocity.js</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="./js/velocity.min.js"></script>
</head>
<body>
    <div id="root">
        <transition
            name="fade"
            @before-enter="handleBeforeEnter"
            @enter="handleEnter"
            @after-enter="handleAfterEnte"
        >
            <div v-show="show">Hello World</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
</body>
<script>
    // js动画的钩子函数
    // 入场动画对应的钩子函数enter
    // [email protected]enter 即将显示之前触发的函数。可以设置字体变红。
    // 2.执行所有动画@enter,手动调用回调函数。告诉vue动画已经执行完了。
    // [email protected]enter动画结束后执行的函数。

    // 出场动画对应的钩子函数leave
    // @before-leave="handleBeforeEnter"
    // @leave="handleEnter"
    // @after-leave="handleAfterEnte"

    var vm = new Vue({
        el:"#root",
        data:{
            show:true
        },
        methods:{
            handleClick:function(){
                this.show = !this.show;
            },
            handleBeforeEnter:function(el){
                el.style.opacity = 0;
            },
            handleEnter:function(el,done){
                // 动画从0到1,耗时3s的时间。
                // 动画执行完毕后,complete这个属性对应的内容会自动执行。(比如调用回调函数。)
                Velocity(el,{opacity:1},{
                            duration:3000,
                            complete:done
                        }
                    );
            },
            handleAfterEnte:function(el){
                console.log("动画结束");
            }
        }

    })
</script>
</html>

原文地址:https://www.cnblogs.com/c-x-m/p/10013698.html

时间: 2024-10-14 01:26:52

05.vue中js动画与Velocity.js的结合的相关文章

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

JQuery动画插件Velocity.js发布:更快的动画切换速度

5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度.Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换.转换(transform).循环.缓动.CSS切换.Scroll功能,它是jQuery. jQuery UI.CSS变换 在动画方面的最佳组合.Velocity.js支持IE8+.Chrome

聊聊JS动画库:Velocity.js

前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是静下心来学习新技术和写一写技术文章,希望能继续坚持下去吧. JS动画 随着互联网越来越丰富多样,网页端的美化和新技术层出不穷,作为一个网站的浏览者,更多吸引他们的除了保证网站的流畅之外还有各种炫酷的交互动效. 网页的交互动效大概分为 css动画,js动画 . JS动画的优点 既然我们大概了解了这两类

Vue 中的动画特效

Vue 中的动画特效 CSS 实现标签显隐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U

javascript动画:velocity.js学习

第二章:基础知识 一.velocity和jQuery: Velocity函数是独立于jQuery的,但两者可以结合使用.通常这么做的好处是可以利用jQuery的链式操作:当你先用jQuery选择了一个元素后,就可以用这个元素去调用.velocity()为它添加动画效果.例如: //将一个变量分配给某个jQuery元素对象. var $div = $(“div”); //使用velocity设置该元素的动画 $div.velocity({ opacity : 0 }); //该句语法与jQuery

Vue中的动画效果

Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js 下面分别从这个4个工具来学习Vue动画效果. 一.单元素/组件的过渡 Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进

vue中如何在本地导入js文件

import {setStore,setUser,getStore,removeStore} from "../../../public/localstory" 在导入js文件时,推荐大家可以先看下ES6的有关内容 http://es6.ruanyifeng.com/#docs/module import {setStore,setUser,getStore,removeStore} from "../../../public/localstory"//其中 set

vue中使用动画vue-particles

1.下载依赖 npm install vue-particles --save-dev 2.main.js引入 import Vue from 'vue' import VueParticles from 'vue-particles' Vue.use(VueParticles) 3.直接使用 <vue-particles color="#dedede" :particleOpacity="0.7" :particlesNumber="80"

vue中css动画原理

显示原理: <transition name='fade'> <div v-if='show'>hello world</div> </transition> 当一个元素被transition包裹了之后,vue会自动当分析元素的css样式,然后构建一个动画的流程,在动画即将被执行的一瞬间,vue会在内部标签上增加两个class名字,分别是fade-enter,fade-enter-active,在动画执行到第二帧的时候,也就是动画开始后,fade-enter