Составление div с фиксированным заполнителем (и поддержание во время анимации) - PullRequest
Новая
       6

Составление div с фиксированным заполнителем (и поддержание во время анимации)

0 голосов
/ 30 июня 2018

Пожалуйста, смотрите jsfiddle . Заранее спасибо!

Я пытаюсь запустить анимацию, где одно слово вставляется, чтобы заменить существующее слово.

Stacking - я могу сложить div, используя absolute , но я не могу обернуть div, чтобы он сохранил желаемое место. (т.е. я хочу, чтобы входящий / исходящий текст отображался в красном поле)

Анимация - Дивы хотят складываться, когда обе анимации запущены (после того, как задержка закончится для анимации № 2). Я не могу запустить оба «встроенных / абсолютных»? 

$(function() {
  $('#Action').click(function(e) {
    //start incoming
    Enter('#Incoming', 'fadeInRight');
    //add minor delay and then start outgoing
    setTimeout(function() {
      ExitAndHide('#Outgoing', 'fadeOutLeft');
    }, 2000);

  });
});

//outgoing function
function ExitAndHide(item, action) {
  $(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(item).hide();
  });
};

//incoming function
function Enter(item, action) {
  $(item).css("display", "inline-block");
  $(item).removeClass().addClass(action + ' animated');
};
.stackable {
  position: absolute;
  display: inline-block
}

.container {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.container2 {
  position: relative;
  width: 100%;
  border: 1px solid #FF0000;
}

.fadeOutLeft {
  animation-name: fadeOutLeft
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  animation-name: fadeInRight
}

.text-center {
  text-align: center !important;
  font-size: xx-large;
}

.animated {
  animation-duration: 5s;
  animation-fill-mode: both
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" text-center">
  <div class="container">
    <div class="container2">
      Content Should be here
    </div>
    <div id=Outgoing class="stackable">
      <strong>Outgoing</strong>
    </div>
    <div id=Incoming class="stackable">
      <strong>Incoming</strong>
    </div>
  </div>
  <button id=Action>Action</button>
</div>

1 Ответ

0 голосов
/ 30 июня 2018

Если вы хотите содержимое в элементе <div class="container2">, тогда вы должны разместить его в своем HTML. 

<div class=" text-center">
  <div class="container">
    <div class="container2">

      <div id="Outgoing" class="stackable">
        <strong>Outgoing</strong>
      </div>
      <div id="Incoming" class="stackable">
        <strong>Incoming</strong>
      </div>

    </div>
  </div>      
  <button id=Action>Action</button>
</div>

Я бы также добавил overflow: hidden к .container2 в CSS.

JSFIDDLE ---- [DCML] обновлен до версии с ответом

К сожалению, фрагменты кода поддерживают только до версии 2.1.1 jQuery.

[РЕДАКТИРОВАТЬ]

Примечательно, что вы упускаете кавычки вокруг id=Outgoing и id=Incoming. Вы также должны фактически применить position: absolute к этим элементам, и в этом случае вам также потребуется применить значение height к .container, так как .container не будет учитывать "присущую высоту" элементов с position: absolute.

JSFIDDLE и фрагмент кода были соответственно обновлены. 

$(function() {

  $('#Action').click(function(e) {
    //start incoming
    Enter('#Incoming', 'fadeInRight');
    //add minor delay and then start outgoing
    setTimeout(function() {
      ExitAndHide('#Outgoing', 'fadeOutLeft');
    }, 2000);

  });
});

//outgoing function
function ExitAndHide(item, action) {
  $(item).removeClass().addClass(action + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(item).hide();
  });
};

//incoming function
function Enter(item, action) {
  $(item).css("display", "inline-block");
  $(item).removeClass().addClass(action + ' animated');
};
#Incoming, #Outgoing {
  position: absolute;
}

.stackable {
  position: absolute;
  display: inline-block
}

.container {
  position: relative;
  width: 100%;
  border: 1px solid #000;
}

.container2 {
  position: relative;
  width: 100%;
  border: 1px solid #FF0000;
  
  height: 100px;
  overflow: hidden;
}
.fadeOutLeft {
  animation-name: fadeOutLeft
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0)
  }
  to {
    opacity: 1;
    transform: none
  }
}

.fadeInRight {
  animation-name: fadeInRight
}

.text-center {
  text-align: center !important;
  font-size: xx-large;
}

.animated {
  animation-duration: 5s;
  animation-fill-mode: both
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class=" text-center">
  <div class="container">
    <div class="container2">

      <div id="Outgoing" class="stackable">
        <strong>Outgoing</strong>
      </div>
      <div id="Incoming" class="stackable">
        <strong>Incoming</strong>
      </div>

    </div>
  </div>      
  <button id=Action>Action</button>
</div>
...