关于js事件冒泡之transitionend

今天在写一个小页面的时候，为了让form组件好看一点，特意添加了border过渡效果，代码如下：

代码很简单，就是hover时，会有颜色过渡，其实这没有什么问题，但是这个dom的顶层dom添加了transitionend事件，结果就悲剧了，多说无益，上图：

html：

js：

自己封装的js方法：

该方法原理：trigger('show')去掉.hide，然后opacity由0过渡到1，到1时会出发transitionend，然后执行回调方法，trigger('hide')和trigger('show')作用相反，opacity先由1过渡到0，触发transitionend，然后添加.hide，最后执行第二个参数回调方法。

元素#category-modal上绑定了ToggleModal方法，第一个参数是trigger('show')时回调方法，回调方法中加载列表，在form组件没有添加transition时，是没有任何问题的，但添加后select的hover就触发了当前dom的transitionend事件，然后冒泡到#category-modal，造成该dom不停的被触发transitionend，当时觉得特别奇怪，为什么会出这种莫名其妙的问题...各种调试方法都试过了，在长达一个多小时的调试后均无果，最后只能console.log事件event

看到这个醒目的橙色字体，我立刻秒懂，毕竟是自己开发的插件...果断不要这个css效果了

总结下经验吧，像这种BUG在开发中是很不容易遇到的，因为transitionend这个东西，很少会用到，ToggleModal这个插件也只是用来过渡一下显示、隐藏效果，但是我个人比较喜欢这个事件，它和animationend都是属于比较冷门的js事件，在实际开发中能解决一些比较棘手的问题。例如想让一个弹出层渐入渐出，并且每次渐入渐出都分别想要执行一次回调方法，那怎么办呢？我的思路是事先隐藏一个position:fixed的dom（css如background: rgba(0, 0, 0, 0)），并且opacity要为0（否则dom的背景色没有变化），弹出时，首先移除.hide，使显示出来，然后再渐变opacity从0到1，注意，removeClass('hide')后，不能立即执行opacity: 1，这两段代码之间必须有阻塞，否则无效：

这里使用的是异步，setTimeout没有指定时间，无所谓了，在windows系统下貌似是在16毫秒后新开一个子线程执行，这样就能实现渐入；或者在$this.css('opacity', 1);之前加一个$this.css('css属性即可');这样也能造成短暂阻塞，实现相同效果，但是这样加一段代码感觉有点莫名其妙，还是使用setTimeout比较好。至于为什么需要在removeClass('hide')后面添加阻塞代码，这也是实践很多次发现的，原理嘛，我一个小前端还没弄懂原理...有时间再搞吧。

有兴趣的可以看看transition和animation相应的事件，个人感觉比较好用，但IE这个逗逼需要看版本，所以慎用。

本人语言组织能力不强，看的不爽，多包涵，这两天有时间，把我自己搞的图片裁剪和文件上传插件也上传上来和大家分享。