切换抖动续集
最后更新于
这有帮助吗？
最后更新于
这有帮助吗？
上次我们解决了这个浮动容器
抖动的 bug
然后呢就有细心同学发现
他虽然不抖了
但是呢
这个页面过度的动画效果没了
大家看
那我就心想这简单呀
我就在这加个 transition 是不就行了就行了
顶多呢我们在这加个appear
让他加载和销毁的时候都有动画吗
我们来看一下
大看这就有动画了吗
但是
他销毁的时候还是没有动画大家看
这样看可能看不清哈
我把动画放慢一点
现在是0.2
我们把它改成1秒
大家看进来没问题
然后呢我再离开
是吧？离开的时候没有动画
那这是为什么呢
后来我就发现啊
原因是我们在这个组件销毁以后
手动的移除了这个dom元素
所以呢
导致他没有触发这个transition的动画
那既然这样呢
那我们索性移除的动画就自己做好了
其实也很简单嘛
就是我们在他
移除之前先展示一个动画效果
展示这个动画效果呢就特别简单
我们就给加两个样式吗
就是我们现在定义的这两个样式
一个这个
还有一个这个
那我们给谁加这个样式呢
我们来看一下
首先这个 node
指的是谁
他指的就是这个
div
因为里面transition是不渲染 html元素的
所以我们要给这个加动画
就是这个 node
里面的
第一个子元素
给这个加动画怎么加呢
就是classList.add
好再加一个
给他加上动画以后呢
我们再去移除
但是注意我们不能立马移除
我们要等动画运行完了再去移除
所以呢我们先加一个settimeout
set time out
他动画现在是1秒吗
所以呢我们先来个1,000毫秒
然后呢我们在这做移除
我们先看看效果
进来
离开哎没问题了
但是有一个问题就是现在不是很完美
我们这个1000要写死
以后维护起来就不是很方便
所以呢
我就在想这个值能不能动态的获取到
那个样式里声明的时间
后来我发现可以这样写
window 点 gat compute 的
style 然后把这个元素传进去
这样的话呢我们就拿到了这个元素
动态计算之后的
完整样式的一个类似于快照
所以呢我们在这直接点
想要我们的属性就行了
transition
duration
这个属性
我们先把它打（印）一下
好我们试一下
这进来然后呢我们离开
大家看一秒
但是这里边时间有点问题
他有可能是豪秒有可能是秒
所以呢我们要做一下判断
我们就叫 duration
然后呢我们判断一下它是毫秒还是秒
我们这里边用正则吧
判断他是不是 ms 结尾就行了
好
duration…我看一下（提示的对不对）啊
没问题 ms 结尾
s 结尾然后直接float就行了
然后呢
拿了这个时间我们放在这
把这个时间打一下
看一下效果
1,000没问题对吧
然后呢我把这改一下
把它改成
0.2
大家看：200
这样就没问题了