CODEWITHSUNDEEP
javascriptjqueryanimate.css
Remus Case
Remus Case

Reputation: 470

Animation with Popups Box

At the starting of 'zoomIn' animation the background: rgba(0, 0, 0, 0.5); comes along with it but what I am trying is to popup box to have zoomIn animation and the background: rgba(0, 0, 0, 0.5); should already be there.

And I am trying to implement smooth animation of 'backOutTop' after clicking Submit button in the popup box but:
1) The animation is not smooth, it happens very suddenly.
2) After the animation the popup box doesn't seem to hide even after I have set visibility: hidden;

If there's any other way to do that. Please do share. Thank You.

$(document).ready(() => {

  setTimeout(() => {
    $(".popUp").css('visibility', 'visible')
  }, 500); //Automatically Pops up after 0.5 sec.

});

document.querySelector('.btn-name').addEventListener('click', () => {

  document.querySelector('#popUpid').classList.remove('popUp');
  document.querySelector('#popUpid').classList.add('popUpClose');

});
body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.popUp {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
  position: absolute;
  visibility: hidden;
  animation: zoomIn;
  animation-duration: 3s;
}

.popUpClose {
  visibility: hidden;
  animation: backOutUp;
  animation-duration: 3s;
}

.popUpBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 150px;
  border: 3px solid black;
  background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}

.btn-name {
  margin-top: 10px;
  margin-left: 10px;
  width: 100px;
  font-size: 15px;
  cursor: pointer;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="popUp" id="popUpid">
    <div class="popUpBox">
      <button class="btn-name">Submit</button>
    </div>
  </section>
  <section class="wrapper">
    <h1>
      Content
    </h1>
  </section>
</body>

Upvotes: 2

Views: 75

Answers (1)

Atul Rajput
Atul Rajput

Reputation: 4178

as per the question explanation, these are the little changes you need to do in your code.

$(document).ready(function() {

        setTimeout(() => {
            $(".popUp").css('visibility', 'visible')
        }, 500); //Automatically Pops up after 0.5 sec.
        
        $('.btn-name').click(function() {
            $('#popUpid').addClass('popUpClose');
        });
    });
    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .popUp {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 101;
        position: absolute;
        visibility: hidden;
        animation: zoomIn;
        animation-duration: 3s;
        opacity: 1;
        transition: opacity 1s;
    }

    .popUpClose {
        opacity: 0;
        animation: backOutUp;
        animation-duration: 3s;
    }

    .popUpBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 150px;
        border: 3px solid black;
        background: linear-gradient(to bottom right, #FFFF00, #00FF00);
    }

    .btn-name {
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        font-size: 15px;
        cursor: pointer;
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp" id="popUpid">
            <div class="popUpBox">
                <button class="btn-name">Submit</button>
            </div>
        </section>
        <section class="wrapper">
            <h1>
                Content
            </h1>
        </section>

for your still background and animation only on popUP.

$(document).ready(function() {

        setTimeout(() => {
            $(".popUpBox").addClass('show');
            
        }, 500); //Automatically Pops up after 0.5 sec.
        
        $('.btn-name').click(function() {
            $('#popUpid').addClass('popUpClose');
            setTimeout(() => {
                $(".popUp").css('opacity','0');
        }, 1800);
        });
    });
body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .popUp {
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 101;
        position: absolute;
    }

    .popUpClose {
        opacity: 0;
        animation: backOutUpCustom;
        animation-duration: 3s;
    }

    .popUpBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0,0);
        width: 200px;
        height: 150px;
        border: 3px solid black;
        transition: all 3s;
        background: linear-gradient(to bottom right, #FFFF00, #00FF00);
    }
    .popUpBox.show {
        transform: translate(-50%, -50%) scale(1,1);
    }
    .btn-name {
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        font-size: 15px;
        cursor: pointer;
    }
    @keyframes backOutUpCustom {
    0% {
        -webkit-transform: scale(1);
        transform: translate(-50%, -50%) scale(1,1);
        opacity: 1
    }

    20% {
        -webkit-transform: translate(-50%, 0) scale(0.7,0.7);
        transform: translate(-50%, 0) scale(0.7,0.7);
        opacity: .7
    }

    to {
        -webkit-transform: translate(-50%, -700px) scale(0.7,0.7);
        transform: translate(-50%, -700px) scale(0.7,0.7);
        opacity: .7
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp">
            <div class="popUpBox" id="popUpid">
                <button class="btn-name">Submit</button>
            </div>
        </section>
        <section class="wrapper">
            <h1>
                Content
            </h1>
        </section>

Upvotes: 2

Related Questions