css3动画怎么触发子菜单隐藏和显示

html-css028

css3动画怎么触发子菜单隐藏和显示,第1张

itjob为您解答：

<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