没有jQuery的CSS转换

Question

我正在制作一个web应用程序，我想在不同的选项卡之间切换，我在第节中设置了这些选项卡，并将数据角色设置为页面。我可以很好地切换选项卡，但当我尝试添加CSS转换时，它没有任何作用。无论我是否设置了转换，应用程序的响应方式都是一样的，它甚至不会给我一条错误消息，说明为什么没有进行转换。

这是我的CSS：

[data-role=page]{
postion: absolute;
top: 0; 
left: 0;
display:none;
transition: left 0.8s ease;  /* faulty transition */
}
.active{
display:block; 
}
.hide{
display: none;
}

上面在CSS中显示的隐藏类和活动类是我用来在选项卡之间切换的。

Answer 1

css3的transition属性只有在transition值发生更改时才起作用。在您的情况下，如果您希望转换工作，则必须更改元素的left属性。也许你可以使用不透明度0和1，而不是隐藏/显示你的元素，并将你的转换放在这个属性上。

[data-role=page] {
position: absolute;
top: 0; 
left:0;
display:none;
transition:opacity 0.8s ease
}
.active{
opacity:1; 
}
.hide{
opacity:0;
}

如果要在left属性上进行转换。你应该有这个改变的值。

.active{
left:0; 
}
.hide{
left:-100%;
}