jquery 监听 css

html-css016

jquery 监听 css,第1张

为什么要监听，干嘛不在display变化的时候执行某个方法？

监听也行，假设这个div的id是test，先获取$("#test").is("hidden")返回值，记录下来，然后写一个函数，不停地判断$("#test").is("hidden")是不是跟记录下来的那个不一样，是的话就执行某个操作，然后更新记录

还记得许多年前，我们为一个元素添加有一个动画class之后，你还在用settimeout来延迟下一个动作,这么做过时啦。

哪怎么做呢。

不是添加了一个类么，哪动画结束以后来执行这个动作呗。

哪么动画有两种，还是要区别对待的。

1.animation

2.transition

-webkit-animation动画其实有三个事件：

开始事件 webkitAnimationStart

结束事件 webkitAnimationEnd

重复运动事件 webkitAnimationIteration

嗯 对 就是这么简单 后面的实际用例我会附上

待更新中。。。

这篇文章写出来以后，朋友反馈过来有兼容性问题。

iOS9一下和安卓4.4一下是不支持的。

因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题，关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。

其他比较好的解决方案还是使用setTimeout去解决这个问题。

https://developer.mozilla.org/en-US/docs/Web/Events/transitionend

注意：每个启用TransitionCSS属性的分别对应独立的transitionend事件

Vue3对CSS支持加入了更多的特性支持，这样的话，我们在项目当中使用CSS就变得更加灵活了，来吧我们直接上干货

在style的标签上加一个module的属性，这样style里面的内容就会被编译成CSS Modules（模块），默认情况下，我们可以在模板代码里，或者JS里通过$style拿到所有样式属性并使用

我们也可以给CSS Modules自定义一个名称，在style的module属性设置一个名称就可以了,这样的话在模板和JS里就通过自定义的名称来引入CSS里的属性

与组合式 API 一同使用，注入的类可以通过 useCssModule API 在 setup() 和.success { color: #090}

可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上

这个语法同样也适用于