CSS

记录了一些使用到的技巧。

transform

网页内的最小字号为 12px ，若想显示的更小，可以用到 transform: scale(.8) 属性。下方为一个 vue 组件示例。

tempalte

<div :style="style">
	{{ props.text }}
</div>

script

import {computed} from "vue";

const props = defineProps({
	text: String,
	max: {
		type: Number,
		default: 12
	}
})

const style = computed(() => {
	if (props.text.length <= props.max) {
		return null;
	}
	
	// 自定比例
	const v = 1 - (props.text.length - props.max) / 20;
	return 'transform: scale(' + v + ')';
})

transition

用来实现过渡动画。通过增加 class 和 移除 class，来实现动画的执行和回撤。

html

<div id="div">让我动</div>

css

#div {
    margin-left: 100px;
    transition-property: margin-left;
    transition-duration: 1s;
}

#div.show {
    margin-left: 0;
}

js

document.querySelector('#div').addEventListener('click', function(e) {
    e.target.classList.toggle('show');
})