Question

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

下面是

的简单示例代码

＆＃13;

$('button').click(function(){
  $('.block').toggleClass('block-open');
})

＆＃13;

.block {
  display: none;
  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 {
  display: block;
  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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<div class="block"></div>

＆＃13;

Answer 1

删除display：block; ＆安培;显示：无;

检查以下工作代码段

$('button').click(function(){
  $('.block').toggleClass('block-open');
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<div class="block"></div>

Answer 2

检查一下，

$('button').click(function(){
  $('.block').toggleClass('block-open');
})

.block {
  display: 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 {
  display: block;
  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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Toggle</button>
<div class="block"></div>

Answer 3

只需删除display: block;和display:none;

即可

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

}

完整代码：

＆＃13;

$('button').click(function(){

  $('.block').toggleClass('block-open');
  
})

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Toggle</button>

<div class="block"></div>

＆＃13;

Answer 4

CSS属性display:none;实际上不支持转换。

您可以使用overflow:none;和height:0;。

以下是演示链接：https://jsfiddle.net/sujan_mhrzn/76tf7ds9/

过渡动画不起作用

4 个答案: