animation of the communication



  • The messages come from the bottom of the bloc, I made an animation for the appearance of the message.

    $('#ck').click(function(){
      $('.inner').append('<div class="block">Сообщение</div>');
    });
    .block {
      width: 100px;
      height: 20px;
      background: green;
      margin: 10px;
      color:white;
      animation: error .3s;
    }
    .cont {
      border: 1px solid black;
      height: 400px;
      position: relative;
    }
    .inner {
      position: absolute;
      bottom: 0;
    }
    @keyframes error {
        0% {
            transform: scale(.2);
        }
        25% {
            transform: rotate(7deg) scale(1)
        }
        50% {
            transform: rotate(-7deg)
        }
        75% {
            transform: rotate(7deg)
        }
        100% {
            transform: rotate(0deg)
        }
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="ck">клик</button>
      <div class="cont">
        <div class="inner"></div>
      </div>

    I don't think it's a good idea to do the same thing, so when the message comes down from the bottom, it floated the rest of the messages up instantly. Well, or if you have any other ideas about how to make sure that this type of message doesn't show up, I'll hear your proposals.



  • $('#ck').click(function(){
      $('.inner').append('<div class="block">Сообщение ' +
      Math.floor(Math.random() * (9 - 0)) + '</div>');
    });
    .block {
      display: block;
      padding: 3px 6px 3px 6px;
      border-radius: 2px;
    

    height: 20px;
    background: green;
    margin: 10px;
    color:white;
    animation: error .4s;
    }
    .cont {
    border: 1px solid black;
    height: 180px;
    position: relative;

    overflow: hidden;
    }
    .inner {
    position: absolute;
    bottom: 0;
    }
    @keyframes error {
    0% { height: 0px; margin-top: -16px; }
    100% { height: 20px; margin-bottom: ''; }
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>
    <button id="ck">клик</button>
    <div class="cont">
    <div class="inner"></div>
    </div>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2