GreenSock动效库TweenMax简单使用代码片段

简介: GreenSock动效库TweenMax简单使用代码片段


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
 
<script type="text/javascript">
 
    //demo 1----------------------------------------
    TweenMax.to("CSSselectors", 1, {
        opacity: 0,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: function () {
            //一些动画结束后要触发的动作
            /*document.querySelector("CSSselectors").style.*/
        }
    });
 
    //demo 2----------------------------------------
    TweenLite.to(DOM元素, 1, {
        opacity: 0,
        scale: 1.2,
        ease: Strong.easeOut,
        delay: 1,
        onComplete: completeHandler,
        onCompleteParams: ["传参"]
    });
 
    //demo 3----------------------------------------
    let tl = new TimelineMax({repeat: 0, repeatDelay: 0});
    tl.to(".green", 1, {x: 200})
        .to(".orange", 1, {x: 200, scale: 0.2}, "+=1").addLabel("greyAndPink")
        .to(".grey", 1, {x: 200, scale: 2, y: 20}, "greyAndPink")
        .to(".pink", 1, {x: 200, rotation: 360}, "greyAndPink");
 
</script>


相关文章
|
7月前
|
JavaScript
如何使用原生js实现导出的效果
如何使用原生js实现导出的效果
|
6月前
|
缓存 JavaScript 前端开发
js开发代码片段与小技巧
js开发代码片段与小技巧
32 2
|
7月前
|
移动开发 小程序 API
uniapp组件库SwipeAction 滑动操作 使用方法
uniapp组件库SwipeAction 滑动操作 使用方法
194 1
|
7月前
|
移动开发 小程序 前端开发
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
uniapp中uview组件库CircleProgress 圆形进度条丰富的使用方法
1184 1
|
7月前
|
API
uniapp中组件库的丰富NumberBox 步进器的用法
uniapp中组件库的丰富NumberBox 步进器的用法
277 0
|
前端开发
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
134 0
|
JavaScript API 容器
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
【ECharts】ECharts框架想要做Sunburst的解决方法和拖拽功能的详解
|
Web App开发 JavaScript 前端开发
强大的矢量图形库:Raphael JS 中文帮助文档及教程
  Raphael 是一个用于在网页中绘制矢量图形的 Javascript 库。它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,还可以绘制任意形状的图形,可以进行图表或图像的裁剪和旋转等复杂操作。
2654 0
|
JavaScript API
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
129 0
关于Markdown编辑器的一些简单使用语法
关于Markdown编辑器的一些简单使用语法 Markdown编辑器的日常使用其实还是比较方便的,语法也不会过于复杂。在Markdown编辑器中,常用的标记符号不超过10个,只需要少量的时间就可以轻松掌握。 创建标题 标题是文章中最常用的格式之一,在Markdown编辑器中,如果我们想创建一个标题,只需要输入符号#,在符号#之后空一格然后输入标题名称。Markdown编辑器最多支撑到6级标题,符号#的数量就是对应标题的等级。
107 0