Animate.css

animate动画，小程序使用，vue改一下后缀名就可以了。

动画效果

最新animate.css文件，解压后将里面的animate.css放入vscode即可

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //动画函数 obj---要执行动画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个动画) //调用例： //zIndex:1000 //透明度opacity: 数字类型----小数---放大100倍 // my$("btn1").onclick = function () { // var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; // animate(my$("dv"), json1, function () { //var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000} // animate(my$("dv"),json2,function(){按照此格式多次重复添加动画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } i

Sketchup 动画插件，SU路径动画插件SU_Animate4.1中文汉化破解版，支持pro 2017

由小码农整理分享 网址：https://www.code-elf.cn/ 有的页面在上下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。

基于原生JS的animate,纯原生JS，可实现多元素同时运动和运动队列

animate.css定义了大概50多种动画形式，包括淡入淡出，文字飞入、左右摇摆动画等等。使用animate.css也非常简单，你可以给页面上的任意元素，特别是文字添加各种神奇的动画特效。