Javascript 过渡动画不'；行不通

为什么过渡动画不起作用？ 我使用显示、可见性和不透明度，但不起作用

下面是简单的示例代码

$（“按钮”）。单击（函数（）{
$（'.block'）.toggleClass（'block-open'）；
})

.block{
显示：无；
可见性：隐藏；
不透明度：0；
背景色：红色；
宽度：250px；
高度：250px；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}
.封锁开放{
显示：块；
能见度：可见；
不透明度：1；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}

切换

移除显示：块；&显示：无

检查下面的工作片段

.block {

  visibility: hidden;
  opacity: 0;
  background-color: red;
  width: 250px;
  height: 250px;
  -webkit-transition: all ease-out 5s;
  -moz-transition: all ease-out 5s;
  -o-transition: all ease-out 5s;
  transition: all ease-out 5s;

}

.block-open {

  visibility: visible;
  opacity: 1;
  -webkit-transition: all ease-out 5s;
  -moz-transition: all ease-out 5s;
  -o-transition: all ease-out 5s;
  transition: all ease-out 5s;

}

$（“按钮”）。单击（函数（）{
$（'.block'）.toggleClass（'block-open'）；
})

.block{
可见性：隐藏；
不透明度：0；
背景色：红色；
宽度：250px；
高度：250px；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}
.封锁开放{
能见度：可见；
不透明度：1；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}

切换

检查此项

$（“按钮”）。单击（函数（）{
$（'.block'）.toggleClass（'block-open'）；
})

.block{
显示：块；
可见性：隐藏；
不透明度：0；
背景色：红色；
宽度：250px；
高度：250px；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}
.封锁开放{
显示：块；
能见度：可见；
不透明度：1；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}

切换

只需删除

显示：块和
显示：无

.block {

  visibility: hidden;
  opacity: 0;
  background-color: red;
  width: 250px;
  height: 250px;
  -webkit-transition: all ease-out 5s;
  -moz-transition: all ease-out 5s;
  -o-transition: all ease-out 5s;
  transition: all ease-out 5s;

}

.block-open {

  visibility: visible;
  opacity: 1;
  -webkit-transition: all ease-out 5s;
  -moz-transition: all ease-out 5s;
  -o-transition: all ease-out 5s;
  transition: all ease-out 5s;

}

完整代码：


$（“按钮”）。单击（函数（）{
$（'.block'）.toggleClass（'block-open'）；
})
.block{
可见性：隐藏；
不透明度：0；
背景色：红色；
宽度：250px；
高度：250px；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}
.封锁开放{
能见度：可见；
不透明度：1；
-webkit过渡：所有5s都很轻松；
-moz过渡：全部放松5s；
-o型过渡：全部放松5s；
过渡：全部放松5s；
}

切换
CSS属性
显示：无实际上不支持转换

您可以使用
溢出：无和<代码>高度：0

下面是演示链接：
这是因为.block类中的display:none规则删除display none和bock