为什么不做动画
来源：5-6 项目作业
繁湖
2019-12-18 10:25:48
<div class="toolbar">
<a href="">
<i class="iconfont"></i>
<span class="toolbar-text ">会员</span>
</a>
<a href="">
<i class="iconfont"></i>
<span class="toolbar-text ">购物车</span>
</a>
<a href="">
<i class="iconfont"></i>
<span class="toolbar-text ">我的关注</span>
</a>
<a href="">
<i class="iconfont"></i>
<span class="toolbar-text ">我的消息</span>
</a>
<a href="javascript:;" id="backToTop">
<i class="iconfont"></i>
<span class="toolbar-text ">顶部</span>
</a>
</div>
.toolbar {
position: fixed;
right: 0px;
top: 50%;
width: 40px;
height: 204px;
}
.toolbar a {
display: block;
background: #b7bbbf;
color: #fff;
width: 40px;
height: 40px;
margin-bottom: 1px;
text-align: center;
line-height: 40px;
position: relative;
}
.toolbar .iconfont {
font-size: 35px;
}
.toolbar-text {
display: none;
width: 80px;
height: 40px;
position: absolute;
left: 0;
color: black;
top: 0;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.toolbar a:hover .toolbar-text {
display: block;
left: -80px;
}
.toolbar a:hover .toolbar-text,
.toolbar a:hover .iconfont {
background: #93999f;
}
我用animation能用 但是transition和 transform无法生效
1回答
-
同学你好，是display属性控制的显示与隐藏和动画冲突了，元素直接显示出来了，没有办法实现过渡动画。建议将元素开始就设置为显示，层级显示在i标签下面。参考：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题