[Day 25] 阿嬷都看得懂的 CSS 微互动元件

阿嬷都看得懂的 CSS 微互动元件

今天我们要来做动态绘本!
https://www.youtube.com/embed/xbzVGjzF1UM

什麽,一下就要这麽进阶吗?呃嗯,其实还好。仔细想想,其实这些动态绘本,都有个固定的模式,那就是读者做某个动作以後就会触发另个动作。例如,读者拉动某个拉杆以後,某张卡片就会开始移动;读者翻开某个卡片以後,就会看见某个原本隐藏的卡片。

这些互动,在网页上会是像怎麽样呢?可能会是滑过某个区块元素的时候,某个区块元素开始移动,或者点选某个区块元素後,浮现出某个文字段落。简单地说,这些互动分作 2 个部分:

  1. 使用者作了某个动作;
  2. 网页发生改变。

让我们先想想那些改变是怎麽发生的。当我们想要让某个区块元素移动,我们会做的事情,是改变这个区块元素的位置。当我们想要让某个文字段落浮现,我们会做的事情,是先让那个文字段落隐藏起来,然後再让这个文字段落变成可见的。

更动位置比较简单,例如我们可以调整

  1. margin 外距;
  2. 将 position 设为 relative 或 absolute 以後,可以使用 top/ right/ bottom/ left 来移动位置。

更动某个元素从可见变成不可见的方法有 3 种:

  1. 设定 visibility 属性:常见的值有 visible 和 hidden 两种,可以把元素显示或隐藏。值得注意的是,无论显示或隐藏,这个元素都还是占据版面的喔!
  2. 设定 display 属性:设定为 none 就整个元件消失,所以消失後也不占版面。其他值就看前面的介绍罗!
  3. 设定 opacity 属性:这是元件的透明程度,值为 0 到 100 间,越小越透明。因此,只要把 opacity 设为 0,视觉效果就会像是隐藏起来了!

那麽,我们要怎麽知道使用者的滑鼠点到什麽元件呢?或者,用比较炫炮的方式说,我们要怎麽**「监听」(listen)** 使用者滑鼠点击的动作呢?还记得我们前几天介绍的伪类选择器吗?我们同样可以把滑鼠移上滑鼠点选的元素,当作某个伪类,并且改变这些元素的属性。例如,

  • :hover 就是用来表示滑鼠移上的那类元素;而
  • :active 就是用来表示滑鼠点击的那类元素;另外,
  • focus 就是用来表示滑鼠选中的那类元素。

因此,现在我们可以

  1. 使用伪类来得知使用者的一些动作,以及
  2. 在这个伪类中,使用其他样式来做出改变。
    这个公式在 .css 档案中看起来会像这样:
类别:使用者动作{
	属性: 值;
}

注意,如果是想正好选到那个类别半形冒号前面不能有空格,想想看为什麽呢?可以看看前两天对於类别组合选择器的讨论。空格在类别组合的选择器当中,是有意义的喔。

例如,在前几天的贴纸簿练习中,我们可以把粉红贴纸另外加上伪类:

.pink:hover{
  background-color: red;
}
.pink:focus{
  background-color: brown;
}

我们就会发现滑鼠移上去以後,粉红贴纸变成红色;不过,为什麽我们滑鼠怎麽点击都没有效果呢?这是因为区块元素不像核取方块、或按钮,预设就可以被选中。想要让元素能够被选中,必须在那个元素的 HTML 标签中,另外写上 tabindex = "-1",看起来会像这样:

<div class="banner pink" tabindex="-1">
  <p>粉红贴纸</p>
</div>

这时候,我们就可以发现,粉红贴纸被点击时,变成咖啡色;点击网页其他地方时,就又变回粉红色罗!

那麽,让我们来玩个组合魔术。如果我想让所有黄色贴纸,在滑鼠移上橘色贴纸以後就变成金色,该怎麽办呢?

没错,上面这个使用者动作的对象元件,和产生样式改变的元件,并不是同个元件。因此,我们没办法只写

.yellow:hover{
  background-color: gold;
}

否则,只有当滑鼠移到黄色贴纸上时,黄色贴纸才会变成金色。当滑鼠移到橘色贴纸上时,黄色贴纸可是完全没有反应喔!

因此,我们必须把滑鼠移上橘色贴纸这件事情写出来,但是实际发生样式改变的元件是黄色贴纸。这件事情乍看有点困难,不过,我们仔细观察这两个元件後会发现:橘色贴纸是黄色贴纸的父元素。因此,我们可以使用组合选择器,只挑出滑鼠移上的橘色贴纸当中的黄色贴纸,并且让这些贴纸进行样式改变。实际上写起来会像这样:

.orange:hover .yellow{
  background-color: gold;
}

那麽,如果我们想要让黄色贴纸在滑鼠移上时消失,应该怎麽办呢?我们刚刚学过 2 种让元件消失的方式。让我们先来试试看 display:

.yellow:focus{
  display: none;
}

黄色贴纸确实在滑鼠移上後消失了,不过後面的贴纸就会跟着移动很烦,所以使用 display 就不是个太好的策略。这时候,我们就可以使用前面提到的 visibility 这个属性:

.yellow:hover{
  visibility: hidden;
}

那麽,如果我们想要让黄色贴纸在滑鼠选中後消失,应该怎麽办呢?让我们先把黄色贴纸都先加上 tabindex,然後使用前面提到的 visibility 这个属性:

.yellow:hover{
  visibility: hidden;
}

我们会发现,尽管点击黄色贴纸时,贴纸瞬间消失了,但是立刻又出现了!这是因为 display: none 与 visibility: hidden 的元素都无法被选中。因此,我们必须使用上面说到的第三种方法,也就是把 opacity 设为 0:

.yellow:focus{
  opacity: 0;
}

这样就可以让黄色贴纸在被点击时消失罗!

底下是今天介绍的动态贴纸簿源码,各位阿嬷可以自己 fork 回家玩玩喔!
https://codepen.io/LogosChen/pen/oNwJPBL

今天我们介绍了怎麽使用 CSS 写出微互动元件,不过有些阿嬷可能会觉得这个做法很局限:

  1. 只有使用者动作的目标对象就是改变样式的元素,或者目标对象和改变样式的元素间具备层级关系时,才能够实现这个微互动;
  2. 监听使用者动作的方法很局限,只有少数的滑鼠动作。

例如,我们没办法在使用者输入某些字词的时候,网页上就做出相应的改变;这当然会大幅局限我们希望达成的效果。因此,只使用 HTML 和 CSS,在网页设计上还是无法达成细致的互动。所以,我们明天开始,就要引入重要的互动脚本,也就是我们的 JavaScript 罗!


想一想:如果我们是想让黄色贴纸一开始隐藏,只有被点击的时候才出现,又应该怎麽做呢?


<<:  [Lesson25] Kotlin - Array

>>:  30天学习笔记 介绍-day 25-View Animation

[Day19] TS:什麽!泛型的参数还能有预设值?

今天这个范例是来自第三方套件 utility-types,在有了前几天的知识後,让我们来试着了解这...

Day6 React搭配JSX运用

昨天学习到了JSX的几大特色与优点之後,今天就正式来学习用JSX搭配react。载入JSX之前先引用...

【第二九天 - Flutter 开发套件之旅(下)】

前言 我们在前一天开发完成了套件,那麽就试着来上架ㄅ 。 可以查看 官方文件,肯定讲的比我清楚哈哈(...

Day23 Android - RxJava+Post

那麽今天主要要用RxJava来结合retrofit做Post的部分,与上次用Retrofit的cal...

建立第一个RESTful api server(连结资料库篇)-1 (Day17)

在一个网页後端程序中,主要都是负责资料的处理,关於资料的储存则是会交由专门处理资料库的系统来处理 而...