potato potato - 22 days ago 8
Javascript Question

Putting all distinct pages in one page

Is that how professionals do it? All the content in one file, I need to do a school project; I can use javascript to hide and show the content. For ex. I am having an about and contact page so using javascript I'll switch through it (display block and none) but I want the transition to have an animation specifically slide, so how will I do it?

Answer

Here an example everything that has values can be animatet

.animation {
  position: relative;
  display: initial;
  padding: 20px;
  float: left;
  clear: both;
}
.animation:after {
  content: "";
  width: 10px;
  height: 10px;
  background: blue;
  transition: 0.4s;
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}
.fail:after {
  display: none;
}
.fail:hover:after {
  display: block;
}
.success:after {
  height: 0;
  width: 0;
  opacity: 0;
  transform: translateY(-50%) rotate(0deg);
  display: block;
}
.success:hover:after {
  width: 10px;
  height: 10px;
  opacity: 1;
  transform: translateY(-50%) rotate(360deg);
  display: block;
}
<div class="animation fail">Failing to animate</div>

<div class="animation success">Animatet</div>