查找display block / none和animate中的更改

Question

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

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;
     }
  }

CodePen：Cordova File Transfer

谢谢

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;        
     }
}