gsap.js实现一个转场页面

最新推荐文章于 2022-11-23 15:14:39 发布

张莹东的博客

最新推荐文章于 2022-11-23 15:14:39 发布

阅读量918

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/qq_20758853/article/details/111292026

版权

不使用css动画实现转场页面,通过gsap创建，TweenLite.to("#box",1,{left:"0",width:'100%',height:'100%'});

原文地址：

http://www.zhangyingdong.com/#/home/detail?bid=31

实现效果

GreenSock动画平台（GSAP）可以对JavaScript可以触摸的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），并解决无数的浏览器不一致问题，而且速度极快（比jQuery快20倍）。了解为什么大约有10,000,000个站点和许多主要品牌使用 GSAP。

不使用css 动画实现

实现

1 引入gsap

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script> 或者 npm install gsap

2 代码

<body>
    <div id="box" class="box color1">box1</div>
    <div id="box2" class="box color2">box2</div>
    <div id="box3" class="box2 color3">box3</div>
    <div id="box4" class="box4 color4">box4</div>
    <script>
        TweenLite.to("#box",1,{left:"0",width:'100%',height:'100%'});
        TweenLite.to("#box2",1,{left:"0",width:'100%',height:'100%',scale:0.5,delay:2});
        TweenLite.to("#box3",1,{top:"0",width:'100%',height:'100%',delay:4});
        TweenLite.to("#box4",1,{top:"0",width:'100%',height:'100%',delay:6});
    </script>
</body>

3 简单样式修饰一下

<style>
    body{
        padding: 0;
        margin: 0;
        font-size: 40px;
        text-align: center;
    }
    .box{
        width: 0;
        height: 100%;
        background-color: #f9d2d3;
        position: absolute;
        overflow: hidden;
    }
    .box2{
        width: 100%;
        height: 0;
        background-color: #f9d2d3;
        position: absolute;
        overflow: hidden;
    }
    .box4{
        width: 100%;
        height: 0;
        background-color: #f9d2d3;
        position: absolute;
        bottom: 0;
        overflow: hidden;
    }
    .color1{
        background-color: #f9d2d3
    }
    .color2{
        background-color: lightgreen
    }
    .color3{
        background-color: lightgray;
    }
    .color4{
        background-color: lightgoldenrodyellow;
    }
    </style>

张莹东的博客

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
gsap.js实现一个转场页面

不使用css动画实现转场页面,通过gsap创建，TweenLite.to("#box",1,{left:"0",width:'100%',height:'100%'});原文地址：http://www.zhangyingdong.com/#/home/detail?bid=31实现效果GreenSock动画平台（GSAP）可以对JavaScript可以触摸的所有内容进行动画处理（CSS属性，SVG，React，画布，通用对象等），并解决无数的浏览器不一致问题，而且速度极...
复制链接

扫一扫