CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BlackCoffee
BlackCoffee

Reputation: 169

CSS transition on load via JQUERY

I'm trying to write some code to cause a transition on load, so I basically have some jquery adding a class, transition-left to a div and some css that says to move left if it has the class transition-left. However, even though the class is being added, the transition isn't happening. I just don't know why that is the case. Here is my code.

$(document).ready(function () {
    $("#curtain-left").addClass("transition-left");
});

$(document).ready(function () {
    $("#curtain-right").addClass("transition-right");
});
.curtain {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 0;

	/* CSS variables to prevent duplication below */
	--piece-width: 100px;
}

.curtain .content {
	/* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	z-index: 0;
}

.curtain-panel {
	display: flex;
	align-items: center;
	position: absolute;
	width: 50%;
	height: 100%;

	transition: left, right;
	transition-duration: 3s;
}

.curtain-panel.left {
	left: 0;
	justify-content: end;
}

.curtain-panel.right {
	right: 0;
}

.curtain-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;

	background-color: #333;
}

.curtain-piece-left {
	width: var(--piece-width);
	height: auto;
	z-index: 2;
	margin: calc(100% - var(--piece-width) / 2);
}

.curtain-piece-right {
	width: var(--piece-width);
	height: auto;
	z-index: 2;
	margin: calc(var(--piece-width) / -2);
}

.transition-left{
	left: -100%;
}

.transition-right{
	right: -100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html>
  <head>
  <link rel="stylesheet" href="css/curtain.css" />
  <link rel="stylesheet" href="css/index.css" />
  <link href="./css/bootstrap.css" rel="stylesheet">
  <link href="./css/index.css" rel="stylesheet">
  <link href="./css/starter-template.css" rel="stylesheet">
    <!-- Let browser know website is optimized for mobile
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/> -->
  </head>

  <body>
    <div class="curtain">
      <div class="curtain-panel left">
        <img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
      </div>
      <div class="curtain-panel right">
        <img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right"  id="curtain-right"/>
      </div>
      <div class="content">
        <nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
          <a class="navbar-brand" href="#">a</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">b</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">c</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">d</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">e</a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="container">
          <div class="starter-template">
            <h1>Template</h1>
            <p class="lead">
              Use this document as a template for other pages.<br />
              Keep in mind, Bootstrap documentation might be needed to build
              components of the other pages.
            </p>
          </div>
        </main>
      </div>
    </div>
    <!-- Bootstrap core JavaScript -->
    <script
      src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
      integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
      crossorigin="anonymous"
    ></script>

    <script src="./js/bootstrap.min.js"></script>
    <script src="js/curtain.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
  </body>
</html>

Upvotes: 0

Views: 42

Answers (1)

Elman Huseynov
Elman Huseynov

Reputation: 1147

You are adding it in the wrong place. Check out my version:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
    <style>
        body{
            margin: 0;
            padding: 0;
            font-size: 14px;
            overflow-x: hidden;
        }

        .curtain {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 0;

  /* CSS variables to prevent duplication below */
  --piece-width: 100px;
}

.curtain .content {
  /* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.curtain-panel {
  display: flex;
  align-items: center;
  position: absolute;
  width: 50%;
  height: 100%;

  transition: left, right;
  transition-duration: 3s;
}

.curtain-panel.left {
  left: 0;
  justify-content: end;
}

.curtain-panel.right {
  right: 0;
}

.curtain-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;

  background-color: #333;
}

.curtain-piece-left {
  width: var(--piece-width);
  height: auto;
  z-index: 2;
  margin: calc(100% - var(--piece-width) / 2);
}

.curtain-piece-right {
  width: var(--piece-width);
  height: auto;
  z-index: 2;
  margin: calc(var(--piece-width) / -2);
}

.transition-left{
  left: -100% !important;
}

.transition-right{
  right: -100% !important;
}

    </style>

<div class="curtain">
      <div class="curtain-panel left">
        <img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/>
      </div>
      <div class="curtain-panel right">
        <img src="https://lh3.googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right"  id="curtain-right"/>
      </div>
      <div class="content">
        <nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top">
          <a class="navbar-brand" href="#">a</a>
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarsExampleDefault"
            aria-controls="navbarsExampleDefault"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">b</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">c</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">d</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">e</a>
              </li>
            </ul>
          </div>
        </nav>

        <main role="main" class="container">
          <div class="starter-template">
            <h1>Template</h1>
            <p class="lead">
              Use this document as a template for other pages.<br />
              Keep in mind, Bootstrap documentation might be needed to build
              components of the other pages.
            </p>
          </div>
        </main>
      </div>
    </div>


<script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>



    <script>

      $(function(){
        $(".curtain-panel.left").addClass("transition-left");
        $(".curtain-panel.right").addClass("transition-right");
      })
    </script>
</body>
</html>

Upvotes: 2

Related Questions