CSS3 Animations Slide-In Div

2019-09-12 05:43发布

站内问答 / CSS3
1380 1 5

I'm creating an html file with the basic structure of this:

    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
        <div id="main">
            <h1>Title</h1>
            <div id="div1"></div>
            <div id="div2"></div>
            <div id="div2"></div>
        </div>
    </body>
    </html>

Right now, #div1 and #div3 have the css3 setting {visibility: hidden}.
On User input, I want #div1 slide in from the left and push #div2 out of the window, and #div3 slide in from the right respectively.

Here is an image to show it: enter image description here I basically want it to look like the black box(the browser window) moved to the div. So #div1 has to slide in from the left and #div2 has to slide out to the right at the same time/speed.

I tried doing this with css3, but I have failed. Here is my css approach:

    #div1 {
        position: fixed;
        z-index: 3;
        visibility: hidden;
        transform: translateX(-100%);
    }

    .slide-left {
        visibility: visible;
        animation: slide-in 0.5s forwards;
    }

    @keyframes slide-in {
        transform: translateX(0%);
    }

Can anybody help me? That would be very appreciated! Thanks and happy new year in advance, Narusan

EDIT: Thanks to kittyCat, I have come as far as that my html-file looks like the following:

    <!DOCTYPE html>
    <html>
    <!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TITLE</title>
        <meta name="Title" content="Main">
    </head>
    <body>
        <style>
            .row{
              border:1px solid black;
              height:100px;
              margin:0;
              width:100px;
              padding:0;
              display:block;
              position:relative;
              overflow:hidden;
            }
            .container{
              height:100px;
              margin:0;
              width:300px;
              padding:0;
              display:block;
              position:absolute;
              left:-100px;
              top:0;
              -webkit-transition:left 0.5s ease-in-out;
              -moz-transition: left 0.5s ease-in-out;
              transition: left 0.5s ease-in-out;
            }
            .ins{
              width:100px;
              float:left;
              height:100px;
              margin:0;
              padding:0;
              background-color:red;
            }
            .div1 {
                background-color: red;
            }
            .div2{
              background-color:green;
            }
            .div3{
              background-color:blue;
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            $(".next").click(function(){
              var current = $(".container").css("left");
              if(current == "-100px"){
                current="-200px";
              }
              else if(current == "0px"){
                current="-100px";
              }
              $(".container").css("left",current);
            });
            $(".prev").click(function(){
              var current = $(".container").css("left");
              if(current == "-100px"){
                current="0px";
              }
              else if(current == "-200px"){
                current="-100px";
              }
              $(".container").css("left",current);});
        </script>
        <div class="row">
          <div class="container">
            <div class="ins div1">div-1</div>
            <div class="ins div2">div-2</div>
            <div class="ins div3">div-3</div>
          </div>
        </div>
        <button class="prev">prev</button>
        <button class="next">next</button>
    </body>
</html>

A HUGE Shout-Out to KittyCat for all the help that was provided by him/her. If you have the same question and this solved it for you, please upvote the answer given below!

1条回答
时光不老，我们不散
2楼-- · 2019-09-12 06:40

Here is a jquery solution (Since you have said yes to the jquery solution in comments)

$(".next").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="-200px";
  }
  else if(current == "0px"){
    current="-100px";
  }
  $(".container").css("left",current);
});
$(".prev").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="0px";
  }
  else if(current == "-200px"){
    current="-100px";
  }
  $(".container").css("left",current);});
.row{
  border:1px solid black;
  height:100px;
  margin:0;
  width:100px;
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
}
.container{
  height:100px;
  margin:0;
  width:300px;
  padding:0;
  display:block;
  position:absolute;
  left:-100px;
  top:0;
  -webkit-transition:left 0.5s ease-in-out;
  -moz-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
}
.ins{
  width:100px;
  float:left;
  height:100px;
  margin:0;
  padding:0;
  background-color:red;
}
.div2{
  background-color:green;
}
.div3{
  background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="container">
    <div class="ins div1">div-1</div>
    <div class="ins div2">div-2</div>
    <div class="ins div3">div-3</div>
  </div>
</div>
<button class="prev">prev</button>
<button class="next">next</button>

EDIT : After the updated question

First problem is that you are adding your <style>....</style> in the body. You should add it in head.

Second problem is that you are adding <script>..</script> before your html content. All the scripts should be in the last of your body. Just before ending body tag, that is </body>

Another solution to the second problem is wrapping your javascript code in $(document).ready(function(){ Insert the code here });. I have done that in the below snippet.

<!DOCTYPE html>
<html>
<!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TITLE</title>
    <meta name="Title" content="Main">
    <style>
        .row{
          border:1px solid black;
          height:100px;
          margin:0;
          width:100px;
          padding:0;
          display:block;
          position:relative;
          overflow:hidden;
        }
        .container{
          height:100px;
          margin:0;
          width:300px;
          padding:0;
          display:block;
          position:absolute;
          left:-100px;
          top:0;
          -webkit-transition:left 0.5s ease-in-out;
          -moz-transition: left 0.5s ease-in-out;
          transition: left 0.5s ease-in-out;
        }
        .ins{
          width:100px;
          float:left;
          height:100px;
          margin:0;
          padding:0;
          background-color:red;
        }
        .div1 {
            background-color: red;
        }
        .div2{
          background-color:green;
        }
        .div3{
          background-color:blue;
        }
    </style>
</head>
<body>

    <div class="row">
      <div class="container">
        <div class="ins div1">div-1</div>
        <div class="ins div2">div-2</div>
        <div class="ins div3">div-3</div>
      </div>
    </div>
    <button class="prev">prev</button>
    <button class="next">next</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $(".next").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="-200px";
          }
          else if(current == "0px"){
            current="-100px";
          }
          $(".container").css("left",current);
        });
        $(".prev").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="0px";
          }
          else if(current == "-200px"){
            current="-100px";
          }
          $(".container").css("left",current);});
      });
    </script>
</body>
</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)