translateY过渡动画导致的多出滚动条
Demo预览：
https://sunzsh.github.io/html-demos/1219.html
代码 / 文件：
https://github.com/sunzsh/st-html-demo/blob/master/1219.html
这是一个小伙伴发来的bug
他写了一个动画
可以让这个元素从屏幕的底边缘
一边上升一边放大
我们先来看下效果哈
那就是这样
但问题是只要加了这个动画
就会出现滚动条
原因其实也很容易理解
我们注意他在动画开始的时候
写了一个translateY(100vh)
也就是说
他会让这个小球在动画开始的时候呢
向下偏移100VH
偏移到屏幕外边去了
然后呢他在后边又写了一个缩放成
也就说看不着了
但是注意这个缩放（默认）是以圆心为中心的
所以就意味着
其实他不用下降100vh这么多
他下降多少呢
我们再往回来一点100vh再往上减
减到一半的高度差不多这个位置
然后再以圆心为中心去缩放
它正好落在屏幕的底边缘
所以我们在这啊
在100vh（的基础上）再减去它一半的高度
现在一个高度是
我们把它减去30px
然后呢我们放到calc里面
我们再把动画打开看下效果
大概就没有出现滚动条了
但是呢这个30px又不能写死
因为啊页面上可能有多个这样的
大小不一的元素
这样的话呢
导致就我们这个动画就不能通用了
所以
我们要想办法让这个变成一个变量
我们把它改成一个var
比如说我们起个名叫size
除以
然后这个size就是这个尺寸了
我们在这个元素上先试一下
现在是
我们在这写一个
size
60px
好我们再来看一下
动画打开
大家看 也是没问题的
好接下来呢
我们就把这个size啊放在这个Div的
标签里边
style
size等于
然后呢我们把这都换成
var(--size)
好，我们再来看一下
也没问题
再接下来呢我们就可以多写几个了
比如说这是
这是
好我们来看一下
看上去没问题了但是还出现滚动条了
这是为什么呢
我们呀这样我们先把这个动画
第一帧拿过来
然后把这个动画关掉
我们先让他缩放1就行了
我们先来看一下他们最初始的位置
大家看 最初始的位置只有一个是正确的
其他的都不对了
为什么会这样呢
我们再把第一帧的效果也去掉
看一下最原始的样子
打开原始他们是底部对齐的
导致这两个元素向下偏移100vh就会超
所以呢我们要把这个div啊
也给改成vertical align等于top
先让他们顶部对齐
这样他们都向下偏移100vh也没有问题
再来试一下这个动画
好这样就没有问题了
最后更新于