<style>
.it{
list-style:none
}
.it li{
float:none
width:50px
height:30px
position:relative
margin-right:10px
}
.it li ul{
display:none
position:absolute
top:30px
left:0px
}
.it li a{
display:block
text-decoration:none
}
@keyframes itjob{
display:block
}
.it li a:hover ul{
animation:itjob 2s
}
</style>
html:
<div class="div1">
<ul class="it">
<li><a href="#">远标培训1</a></li>
<li>
<a>
<ul>
<li><a href="#">远标培训2</a></li>
</ul>
</a>
</li>
<li><a href="#">远标培训3</a></li>
</ul>
</div>
中级：Css3中的帧动画
这次用react-transition-group做一个togglebutton控制div显示和隐藏的例子，首先我们需要安装react-transition-group，输入
组件中引入CSSTransition模块：
一旦动画入场，插件将会自动的在包裹住的标签上添加很多css样式，默认class名是boss-text，所以我们需要给CSSTransition标签加上classNames='boss-text'，然后去css文件进行配置：
如果页面上一组dom都需要添加动画效果时我们需要在最外面再加一个TransitionGroup
记录的原因：项目中遇到一个问题，使用 antd 的 table 组件，在鼠标悬停到一行的时候显示或者隐藏按钮，如下：
鼠标进入一行显示设为默认按钮，移出隐藏按钮 ：
开始我的做法是找到 table 组件的属性通过 setState 来改变 button 的 visibility 属性，虽然效果是达到了，但是 显示和隐藏有个时间的延迟 ，开始我以为是因为 setState 的异步机制,会在频繁的设置 state 的时候合并处理导致的，
后来实验之后发现并不是，于是我就不用 setState 的来设置显示和隐藏，直接给tr加上类名，通过 hover 来显示隐藏
这样实验之后发现同样的问题依然存在， 后来想到display跟visibility的区别：一个是占位一个不占位，于是改成display来做，果然达到效果，鼠标一进一出是立刻显示和隐藏的 。
仔细一想为什么会有这个不同呢，display跟visibility的区别不就是占位不占位么，为什么一个有动画一个没有动画呢，antd对button组件确实做了动画设置 ：
接着我就去 mdn上 搜索关于 transition 动画到底对哪些 css 属性有效果呢，果不其然， display 是没有动画效果的，而 visibility 是有动画效果的 ，
链接如下： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
又学到一个点啊，由此记录一下：）
参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions# 哪些 CSS 属性可以动画
