javascript - 寻找显示 block /无和动画的变化

Question

我正在寻找一种方法来监听显示 block /无中的所有更改，并在 JQuery/JavaScript 中为它们设置动画。

从显示到 block 的切换由 VUE.JS 完成

我在几个地方搜索过，但找不到我要找的东西。这可能吗？

&.contacts {
     background: rgba(0, 0, 0, .1);
     header#home {
        display: none;
     }
     header#projects {
        display: none;
     }
     header#services {
        display: none;
     }
     header#contacts {
        display: block;
        transition: $transition;
     }
  }

代码笔:http://codepen.io/nunoooo/pen/XKodQm?editors=1100

谢谢

Answer 1

因为我们不能为显示属性应用过渡，所以请尝试按照下面的不透明度进行。老实说你的代码很乱，你应该重新重构一下。

1. 带有
的样式标题

header {
  opacity: 0; 
  transition: $transition; 
}

1. 那就这样吧

&.contacts {
     background: rgba(0, 0, 0, .1);
     header#home, header#projects, header#services {
        opacity: 0;
     }
     header#contacts {
        opacity: 1;        
     }
}