没有 jQuery 的 CSS 过渡

Question

我正在制作一个网络应用程序，我想在不同的选项卡之间切换，我已经在数据 Angular 色设置为页面的部分中设置了这些选项卡。我可以很好地切换选项卡，但是当我尝试添加 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 中的 hide 和 active 类是我用来在选项卡之间切换的。

Answer 1

css3 的过渡属性仅在过渡值更改时起作用。在你的情况下，如果你想让你的过渡工作，你将不得不改变你的元素的 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 属性上进行过渡。你应该有这个改变的值(value)观。

.active{
    left:0; 
  }

 .hide{
   left:-100%;
  }