触发display为none元素的动画效果

写模态框时，当模态框show的时候动画没有，原来是元素有display:none时添加样式里css3的变幻效果无法生效，解决的方法总结，测试代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
.modal{
  z-index: 100;
  height: 200px;
  width: 200px;
  background: yellow;
  transition: all 1s;
  display:none;
}
.modal.active{
  background: red;
  transform: translateX(100px);
}
1
2
<a href="javascript:" id="trigger" data-target="#model1">运行动画</a>
<div id="model1" class="modal"></div>

查看详情»