我在网站主导航中为导航项创建了CSS过渡效果。
这是一个相对简单的效果,使用项目前的元素来遮罩和隐藏文本,使用CSS转换和Flexbox布局。
我在Chrome中开发,并在Firefox和Safari(所有最新版本)中进行了测试,然而我发现Safari无法正确显示过渡效果。
我创建了一个简短的示例,让您可以了解该效果。
http://cssdeck.com/labs/owntbier
有办法修复吗? 我想这与Safari解释“justify-content”属性的方式有关。
以下是代码:
HTML
<div class="container">
<ul>
<li>WHY SAFARI, WHY?</li>
</ul>
</div>
SCSS
.container{
position:absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
ul{
list-style-type: none;
}
li{
white-space: nowrap;
position: relative;
color: #ff9900;
cursor: pointer;
font-size: 5vw;
font-weight: 900;
&:hover{
&:before{
max-width: 100%;
}
}
&:before{
position:absolute;
left: 50%;
transform: translateX(-50%);
color: #131313;
content: 'WHY SAFARI, WHY?';
display: flex;
justify-content: center;
overflow: hidden;
max-width: 0%;
transition: max-width 0.5s ease;
}
}
注意 我的预处理器会自动添加必要的供应商前缀。
display: -webkit-box; display: -webkit-flex;
对于transforms:-webkit-transform
- Raimondas Kazlauskas