Question

有人知道为什么当我第一次点击按钮时转换正在工作，然后文本在2s后消失。但是，在隐藏文本后再次单击按钮时，它也应该显示在2sek之后。但是当我点击它时，文本会立即出现。

HTML：

<div class="container">
  <button class="button">Hit me</button>
  <div class="wrapper">
    <div class="title-bar">This is the title</div>
  </div>
</div>

CSS：

.container .title-bar {
  visibility: visible;
  -webkit-transition: visibility 2s;
    transition: visibility 2s;
}

.container.fixed .title-bar {
  visibility: hidden;
    -webkit-transition: visibility 2s;
    transition: visibility 2s;
}

JS：

$('.button').click(function() {
  if ($('.container').hasClass('fixed')) {
    $('.container').removeClass('fixed');  
  } else {
    $('.container').addClass('fixed');  
  }
});

我为此创建了一支笔： https://codepen.io/anon/pen/QqeNrW

谢谢！

Answer 1

来自文档：

可见性：如果其中一个值可见，则插值为离散步骤，其中0到1之间的定时函数值映射到定时函数的可见和其他值（仅在转换的开始/结束时出现）或者作为Y值超出[0,1]的cubic-bezier（）函数的结果映射到更近的端点;如果两个值都不可见则不可插入。

因此，可见性正在发生，也就是说，从0到1，在中间步骤中将是0到1之间的某个值。

但是，所有小数值都映射到可见，这会产生你看到的效果。

不是设置转换持续时间，而是设置转换延迟，它将按预期工作

＆＃13;

$('.button').click(function() {
  if ($('.container').hasClass('fixed')) {
    $('.container').removeClass('fixed');  
  } else {
    $('.container').addClass('fixed');  
  }
});

＆＃13;

.container .title-bar {
  visibility: visible;
  -webkit-transition: visibility 2s;
	transition: visibility 0s 2s;
}

.container.fixed .title-bar {
  visibility: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Hit me</button>
  <div class="wrapper">
    <div class="title-bar">This is the title</div>
  </div>
</div>

＆＃13;

CSS转换只在一个方向上工作

1 个答案: