transition不生效

transition

需要触发生效

• 必须有个开始值和结束值。就是对同一个元素，有两个不同样式。
• 如果一开始这两个样式就可以获取该元素（第二个直接覆盖第一个），就没有过度。
• 如果第二样式的实现依赖于某种改变才会获取该元素，就会有过度。
• 触发分为：
  • 伪类触发，比如 :hover : focus :checked :active。
  • js：点击触发、toggleClass

设置display过渡无效

• 使用display:none(block)对div的隐藏与显示应用于过渡属性上，但是transition完全失效，没有过渡效果。
• 原因：transition属性无法对一个从无到有的元素进行过渡显示。
• 解决方案：
  • 使用visibility替代display
  • visibility:hidden的时候元素仍然存在于文档流中，同时opacity:0；visibility:visible时opacity:1，transition属性可以对在opacity0～1之间进行过渡。

  .con{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    visibility:hidden;
    &.show{
      opacity: 1;
      z-index: 1;
      visibility:visible;
    }
  }