切换抖动续集

上次我们解决了这个浮动容器

抖动的 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

这样就没问题了

最后更新于