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

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

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

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

        当网页某部分发生改变时,添加一些动画有利于让用户知道发生了什么事情。因为动画能预告新内容的到达,或者让用户知道信息被移除。在这篇文章里,将会看到如何运用动画帮助新内容的引进,例如显示或隐藏列表里的项目。

image.png

      引进内容

        动画有个很好的用处,它能够让访客知道你的网站内容在何时发生了改动。当添加或删除内容而没有任何动画进行过渡时,内容的突然改变会让用户感到困惑。而通过添加细微的动画就能避免这种情况发生,并且有助于“宣布”有东西将要离开或引进页面。

        以下是一个通过添加或删除操作来管理列表内容的例子。大多数动画能用于其它类型的内容。

     编写HTML代码

        在一开始,准备好一个已提前填充好的列表和一个可以为该列表添加新项目的按钮。

image.png

        但有一些地方需要注意。首先,在HTML代码里有两个 ID。一般来说,我们不会用 ID 来设置样式,因为它们的唯一性会引入一些问题。然而,它们会在使用 JavaScript 时提供了便利性。

        初始列表项目有类名 “show”,正因为这是类名,我们将会在后面通过它为元素添加动画效果。

     一些 JavaScript 代码

        为了实现演示里的动画,将会编写一些 JavaScript 代码来添加新列表项目,然后为新添加列表项目添加类名 “show”,以至动画能够发生。使用这两个步骤的理由是,如果列表项目直接以可见的状态添加进来,它们就没有任何过渡时间而直接发生了。

        我们打算在 li 元素上使用动画效果,但这将会让通过覆盖样式来添加其它删除元素的动画效果,变得更加困难。

image.png

      无动画

        在最基本的效果中,我们能写一些 CSS 代码显示列表项目。因为添加类名 show 让它们可见,所以删掉类名 show 也能导致它们消失。

image.png

        这些样式将 li 设置为一个没有项目符合、height 为 0、margin 为 0和 overflow 为 hidden 的矩形。这样做是为了直到添加类名 show,它们才会出现而变得可见。

        类名 show 应用了 height 和 margin。因为我们至今还没使用动画,所以列表项目会直接出现在页面,像下面那样。当然你也可以点击列表项目,让它们消失。

image.png        

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

全部评分

此主贴暂时没有点赞评分

总计:0

回复分享

版主推荐

    共有1条评论

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

    • 标题:

    • 内容

    • 验证码:

    • 标题:

    • 内容

    • 选择版块:

    移动帖子x

    移动到: