Animation de déplacement sur un div

Sujet résolu

30 novembre 2016 à 4:15:18

Bonjour/Bonsoir à tous !

Pour les besoins d'un projet, je dois avoir un mouvement de translation entre deux div. J'ai obtenu des résultats grâce au code suivant :

HTML :

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
	<script src="scriptHome.js" type="application/javascript"></script>
	<link rel="stylesheet" type="text/css" href="home.css" />
  <meta charset="utf-8">
  <title>Test</title>
</head>
<body>
  <div class="container">
    <div onclick="test()" class="left">Left</div>
    <div class="right">Right</div>
  </div>
</body>
</html>

CSS :

* {
  box-sizing: border-box;
}

body, html {
  margin: 0;
  height: 100%;
}

.container {
  height: 100%;
}

.left, .right {
  float: left;
  background-color: #e99;
  overflow: hidden;
  transition: all .5s;
  height: 100%;
}

.left {
  width: 100%;
}
.right {
  width: 50%;
}

.expanded .left {
  width: 50%;
  background-color: #f00;
  color: #fff;
}

Javascript :

function test() {
	console.log("test");
  $('.container').toggleClass('expanded');
}

Cependant, le résultat obtenu n'est pas très "propre" dans le sens ou l'on VOIT l'apparition du second div (right).
J'aimerais obtenir une animation plus "smooth" sans effet d'apparition, des solutions pour cela ?

Merci d'avance !

darenju

30 novembre 2016 à 9:28:00

As-tu une page où on peut voir l'effet ?

Développeur Front-End freelance disponible pour contrats ! En guerre contre l'utilisation abusive de jQuery.

Rasgardo

30 novembre 2016 à 12:52:21

Au départ le block ".left" est au dessus du bloc ".right". C'est le passage du bloc ".right" à coté du bloc ".left" qui fait un passage brutale du blanc au Rose.

Pourquoi ne pas mettre les blocs l'un à coté de l'autre au lieu de l'un au dessus de l'autre?

Que veux tu faire exactement?

-
Edité par Rasgardo 30 novembre 2016 à 12:53:06

Dredall

1 décembre 2016 à 19:31:01

J'ai trouvé la solution à mon problème. Le bloc .left prenait 100% de la largeur et le bloc .right en prenait 50, donc forcément, le bloc .right se mettait en dessous du bloc .left.

J'ai modifié cela de manière à ce que le bloc .right prenne 0% de largeur à la base et en prenne 50 après la transition.