主页 / 问题 / 645380
Accepted
VostokSisters
Asked:2020-03-29 01:31:59 +0000 UTC2020-03-29 01:31:59 +0000 UTC

返回正常显示后显示动画

  • 772

有这样一个例子： 

let $div = $('div');

$('button.hide').click(function() {
  $div.one('transitionend msTransitionEnd oTransitionEnd', function() {
    $div.toggleClass('undisplay');
  });
  $div.toggleClass('unvisible');
});

$('button.show').click(function() {
  $div.toggleClass('undisplay');
  $div.toggleClass('unvisible');
});
.divchik {
  display: block;
  width: 80px;
  height: 100px;
  -webkit-transition: height 300ms ease 0s;
  transition: height 300ms ease 0s;
  background-color: orangered;
}

.divchik.unvisible {
  height: 0px;
}

.divchik.undisplay {
  display: none;
}

button {
  display: block;
  width: 80px;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divchik"></div>
<button class="hide">Скрыть</button>
<button class="show">Показать</button>

我需要display:none在完成由.实现的动画后执行transition。
在某些动作之后，我需要按原样返回所有内容，而且还需要在同一属性上使用动画，在这种情况下，动作是 click，属性是 height。
但问题是出现并不顺利。虽然我之前设置了显示toggleClass，但高度为零。也就是说，块应该平滑地返回它的高度。

但那不会发生。可能房子的更新延迟了带有显示的元素。这是我自己想出的解决方案： 

let $div = $('div');

$('button.hide').click(function() {
  $div.one('transitionend msTransitionEnd oTransitionEnd', function() {
    $div.toggleClass('undisplay');
  });
  $div.toggleClass('unvisible');
});

$('button.show').click(function() {
  $div.toggleClass('undisplay');
  setTimeout(() => $div.toggleClass('unvisible'), 0.001);
});
.divchik {
  display: block;
  width: 80px;
  height: 100px;
  -webkit-transition: height 300ms ease 0s;
  transition: height 300ms ease 0s;
  background-color: orangered;
}

.divchik.unvisible {
  height: 0px;
}

.divchik.undisplay {
  display: none;
}

button {
  display: block;
  width: 80px;
  height: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divchik"></div>
<button class="hide">Скрыть</button>
<button class="show">Показать</button>

所不同的是，我给了一个定时器来启动类height: 0px，所以一切都会恢复正常。

问题是：是否可以不用计时器拐杖？然后我不想拐杖 0.001 毫秒。有什么好的解决办法吗？

javascript

1 个回答

  1. Best Answer

    唯一的方法（如果你不能使用visibility: hidden;instead of display: none;）是使用 CSS 动画：

    let $div = $('div');

$('button.hide').click(function() {
  $div.one('transitionend msTransitionEnd oTransitionEnd', function() {
    $div.toggleClass('undisplay');
  });
  $div.toggleClass('unvisible');
  $div.removeClass('side');
});

$('button.show').click(function() {
  $div.toggleClass('undisplay');
  $div.toggleClass('unvisible');
  $div.addClass('side');
});
    .divchik {
  display: block;
  width: 80px;
  height: 100px;
  -webkit-transition: height 300ms ease 0s;
  transition: height 300ms ease 0s;
  background-color: orangered;
}

.side {
  animation: slide 300ms ease;
}

@keyframes slide {
  from {
    height: 0;
  }
  to {
    height: 100px;
  }
}

.divchik.unvisible {
  height: 0px;
}

.divchik.undisplay {
  display: none;
}

button {
  display: block;
  width: 80px;
  height: 20px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divchik"></div>
<button class="hide">Скрыть</button>
<button class="show">Показать</button>

    • 2

相关问题