纯CSS实现消息展示过渡动画

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

前言

这篇文章通过纯CSS实现具有商店开门时间的模式单击动画

通过码上掘金查看代码效果

API

使用到的关键API

transform

CSS transform 属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。

CSS cubic-bezier() 函数

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)。用于控制动画的过渡效果

具体用法可以参考文档

scale3d()

scale3d()CSS函数定义了一个在三维空间中调整一个元素大小的变换。因为缩放量是由一个矢量定义的，所以它可以在不同的尺度上调整不同的尺寸。它的结果是一个transform-function数据类型。

逻辑解析

初始化的dom节点，对应的样式

.toggle {
	display: block;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	
	&__checkbox {
		display: none;
	}
}

.icon {
	cursor: pointer;
	display: block;
	width: 40px;
	height: 40px;
	background: no-repeat center / 40%;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-clock'%3E %3Ccircle cx='12' cy='12' r='10'/%3E %3Cpath d='M12 6v6l4 2'/%3E %3C/svg%3E ");
}

box__item初始化渲染了对应的dom节点，设置了不可见的状态，

点击input状态变为:checked的时候

input[type="checkbox"]:checked {
	& + .box:after {
		transform: translateY(-50%) scale3d(8, 6, 1);
	}
	
	& + .box .box__item {
		transform: translateX(0px);
    opacity: 1;
		visibility: visible;
    transition: all 0.5s ease-out;
    transition-delay: calc(var(--index) * 0.1s);
    transition-property: transform, opacity;
	}
	
	& + .box .icon {
		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3E %3Cpath d='M437.5 386.6L306.9 256l130.6-130.6c14.1-14.1 14.1-36.8 0-50.9-14.1-14.1-36.8-14.1-50.9 0L256 205.1 125.4 74.5c-14.1-14.1-36.8-14.1-50.9 0-14.1 14.1-14.1 36.8 0 50.9L205.1 256 74.5 386.6c-14.1 14.1-14.1 36.8 0 50.9 14.1 14.1 36.8 14.1 50.9 0L256 306.9l130.6 130.6c14.1 14.1 36.8 14.1 50.9 0 14-14.1 14-36.9 0-50.9z'/%3E %3C/svg%3E ");
	}
}

这个控制了白色背景的变化，点击check的时候,x轴变为8倍，y轴变为6倍，z轴不变

	& + .box:after {
		transform: translateY(-50%) scale3d(8, 6, 1);
	}

消息的按顺序渐变出现的关键在

transition-delay: calc(var(--index) * 0.1s);

我们在每个style自定义了属性--index，控制了动画的延迟时间，就控制了每列的显示间隔的过渡动画

总结

今天主要是要了解的是css自定义属性的巧妙用法和scale3d的动画变化效果