[英]CSS - Applying Transitions
I'm not new to CSS but for some reason I've not played with animations or transitions up to this point. 我对CSS并不陌生,但是由于某种原因,到目前为止我还没有玩过动画或过渡。 I want to learn how to apply any form of transition to a tooltip that I've made, but every time I read code and then try I seem to fail.
我想学习如何对我制作的工具提示应用任何形式的过渡,但是每次阅读代码然后尝试尝试时,我似乎都失败了。 I have a quick example of code I put together and maybe someone can quickly show me what I'm doing wrong.
我有一个简单的代码示例,也许有人可以快速向我展示我做错了什么。
Note: This is only an example, I don't plan to use a 2 second transition, makes it clear that it's working. 注意:这仅是一个示例,我不打算使用2秒的过渡时间,因此很明显它是有效的。
Following is the key code, please see the jsfiddle here . 以下是关键代码,请在此处查看jsfiddle 。
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:hover:after {
transition: all 2s ease-in-out;
.borderRadius(3px);
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
}
&:after {
display: none;
}
&:hover:after {
display: block;
}
}
you should assign all the styles to the after and to the hover status just the attribute you want to animate 您应该将所有样式分配给after和hover状态,只分配要设置动画的属性
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:after {
transition: all ease 5s;
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
}
.formRow {
background: #EFEFEF;
margin: 50px auto;
padding: 10px;
width: 50%;
}
.formRow-label {
display: inline-block;
margin-right: 20px;
}
.formRow-input {
display: inline-block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.