Question

基于以下示例：

<div style="display: flex" ng-mouseenter="temp = true" ng-mouseleave="temp = false">
    <div style="border: 1px solid; width: 100%; transition: 1s width">aaaaaaaaaaaaaaaaa</div>
    <div ng-show="temp" style="width: 50px">bbb</div>
</div>

我正在尝试在移除第二个div时为第一个div设置动画。我搜索并尝试了不同的解决方案，但没有运气。第一个div宽度适应没有动画。也许它可能取决于第一个div宽度始终设置为100％的事实。

任何帮助？

Answer 1

您可以在div上添加一个未被移除的类，同时删除另一个类。此类将现有div的宽度转换为100％。它并不完美，但可能会给你一些想法。

＆＃13;

var button = document.querySelector('button'),
    firstDiv = document.querySelectorAll('.firstDiv'),
    lastDiv = document.querySelector('.lastDiv');

button.addEventListener('click', removeLastDiv);

function removeLastDiv() {
  firstDiv[0].classList.add('grow');
  document.querySelector('.parent').removeChild(lastDiv);
}

＆＃13;

* {
  box-sizing: border-box;
}

.parent {
  display: flex;
}

.parent div {
  width: 50%;
  transition: 1s;
}

.parent .firstDiv.grow {
  width: 100%;
}

/* Boring button styles — ignore */
button {
  display: block;
  margin: 0 auto;
  -webkit-appearance: none;
  background: gray;
  border: none;
  margin-top: 1em;
  padding: 0.5em 1em;
  color: white;
  font-size: 20px;
}

＆＃13;

<div class="parent">
  <div class="firstDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima temporibus recusandae numquam, iste nemo! Obcaecati corrupti quibusdam tempora officia, nostrum atque aliquam culpa, facilis odit fugiat iure et quas dolorum</div>
  <div class="lastDiv">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore architecto recusandae dolore, maiores, tempora aut fugiat placeat odit dignissimos eaque libero quam expedita quos possimus nulla itaque veniam at dolor.</div>
</div>

<button>Remove last div</button>

＆＃13;

div的宽度过渡与flex

1 个答案: