扫描二维码,下载安卓APP
下载安卓APP箭头
客服QQ
箭头给我发消息

客服QQ:2698585038
论坛 >编程语言 >给列表项目添加动画(2)

给列表项目添加动画(2)

课课家iOS游客发布于 2017-11-29 09:43查看:4363回复:1

        淡入淡出

        作为第一个动画,我们将会添加一个简单的淡入淡出效果。相对之前的项目列表,该列表项目多了渐变效果。虽然在视觉上看起来仍然有一点笨重,但这有利于让浏览者有更长的时间去注意有东西正在变化。

image.png

        因为要在已创建 CSS 片段上添加效果。所以为了在列表上应用这个效果,需要在包围 li 的容器上添加类名 fade        

image.png

        滑下&淡入淡出

        每次添加或删除一个项目列表都会很突然,这导致了不和谐的效果。那就让我们通过调整高度来创建一个更加流畅的滑动效果。

image.png

        这里与上面类名 fade 唯一不同的是 height:2em 被移除掉了。因为类名 show 已包含了一个高度(继承自第一个CSS片段),这样高度就会自动过渡了。

image.png


        旋转进来

        除了淡入淡出和滑动效果,还能更进一步地添加一些 3D 效果。浏览器不止能在 X 或 Y 轴上变换元素,还具有深度的场景( Z 轴)。

image.png


        为了设置这个效果,需要定义一个 section 容器作为 3D 过渡的舞台。通过给 perspective 赋值就可以做到。

        CSS 的 perspective 代表场景的深度。一个较低的数值意味着近视角,是一个极端的角度。所以这值得你通过设置不同的值来找到一个合适的值。

image.png

        下一步是设置 li 元素在这个舞台里的变形。我们将会使用 opacity 创建淡入淡出效果作为前奏,然后为在舞台上的 li 添加 transform 进行旋转。

image.png

        在这个例子中,让 li 绕X 轴向后旋转 90 度作为初始状态。当添加类名 show 时,它的 transform 被设置为 none,这就能让它在舞台上进行过渡了。为了给它旋转效果,我使用了 cubic-bezier 时间函数。

      侧面旋转

        现在我们只要稍稍调整这个效果,就能十分容易地创建不同的设计。下面这个例子,是让项目列表在侧面旋转。

image.png

        要创建这个效果,我们只需改变旋转轴。

image.png

        我们已经把 rotateX 改成 rotateY 了。

     浏览器内核前缀和浏览器测试

        为了可读性,上面那些代码都没有包含任何前缀。在这里,我强烈推荐添加前缀,以支持那些需要 -webkit 或其他前缀的浏览器。

        正因为这些动画都是在基本的 show/hide 上构建的,所以它们在不支持这些动画的浏览器上优雅地回退。在各种各样的设备和浏览器上进行测试是重要的,但大多数现代浏览器都能支持这些动画。



收藏(0)0
查看评分情况

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

    • 课课家运营团队
    • Mr ken
    • YUI
    • cappuccino
    • mr jack
    • IT宅男
    • Mright
    • 选择版块:

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: