Question

我在通过jQuery触发转换时遇到了一些问题第一次转换完成后，我希望其他div淡入，但不透明度不会执行de transition。直接进入opacity: 1; 我能够解决setTimeout，但我想知道我的代码中是否存在问题

var endTransition = "transitionend";

$('#test').click(function() {
  $(this).css('opacity', '0').one(endTransition, function() {
    $('#test').css('display', 'none');
    $('#test2').css('display', 'inline-block').css('opacity', '1');
  });
});

$('#test2').click(function() {
  $(this).css('opacity', '0').one(endTransition, function() {
    $('#test2').css('display', 'none');
    $('#test').css('display', 'inline-block').css('opacity', '1');
  });
});

#test {
  display: inline-block;
  background: red;
  opacity: 1;
  width: 200px;
  height: 200px;
  transition: opacity .5s ease;
}

#test2 {
  background: blue;
  display: none;
  opacity: 0;
  width: 200px;
  height: 200px;
  transition: opacity .5s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test'></div>
<div id='test2'></div>

Answer 1

一个相当简单而优雅的解决方案：

＆＃13;

$('div').click(function() {
  $(this).fadeOut(function() {
    $('div').not(this).fadeIn().css("display","inline-block");
  });
});

＆＃13;

#test {
  display: inline-block;
  background: red;
  width: 200px;
  height: 200px;
}

#test2 {
  background: blue;
  display: none;
  width: 200px;
  height: 200px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test'></div>
<div id='test2'></div>

＆＃13;

Answer 2

试试这个：

off()

使用更多特定于浏览器的事件名称来实现跨浏览器兼容性。
使用.css('display','inline-block')删除所有以前的事件绑定。
编辑：在您致电.css('opacity','1')之前，您的问题似乎是display: inline-block。这就是因为css Update-Package <package_name> -ProjectName MyProject -reinstall而你的元素立即出现的原因。

过渡结束后，CSS转换未触发

2 个答案: