Is it possible to have a transformation in Javascript without a trigger?

Question

Please note that I am a noobie in JS (1st or 2nd day), and so this question probably seems ridiculous to most of you.

however, I'm trying to implant JS into a project I've been doing. I'm attempting to scale up a image after another object is scaled down (in this case the header), however, for some odd reason it just pops up, no scale, no transition, any clues as to why?

function fadeIn(){
    var el = document.querySelector("h1");
    el.style.opacity= 1;
    el.style.transition="opacity 1.0s linear 0s";
}

window.addEventListener("keypress",checkKeyPress,false);


function checkKeyPress(key){
    var el = document.querySelector("h1");
    var el2 = document.querySelector(".main");
    var el3 = document.querySelector(".text");
    var el4 = document.getElementById("logo");
    if(key.keyCode=="36"){
        el.style.opacity=0;
        setTimeout(function() {
            el.style.display="none";
            el3.style.display="none";
            el2.style.display="inline";
            el4.style.height="800px";
            el4.style.transition="height 1.0s linear 0s";
        }, 1000);
    }
}

    *{
    font-family: helvetica;
    padding: 0px;
    margin: 0px;

}
body{
    height: 100vh;
    width: 100%;
    background-color:black;
}
.text{
    height: 100%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
        ". . ."
        ". center ."
        ". . .";
}
h1{
    grid-area: center;
    color: white;
    justify-self: center;
    align-self: center;
    opacity: 0;
}
.main{
    display: none;
}
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 12fr 1fr 1fr;
    grid-template-areas: 
    ". logo ."
    ". form ."
    ". . ."
}
#logo{
    grid-area: logo;
    height: 0px;
}
#form{
    grid-area: form;
    justify-self: center;
}
#password{
    display: none;
    opacity: 0;
    height: 21px;
    width: 170px;
    border-style: none;
    border-radius: 6px;
    text-align: center;
    font-size: 24px;
}
label{
    color: white;
    padding-right: 3px;
    display: none;
    opacity: 0;
}
#submit{
    display: none;
}

    <body onload="fadeIn()">
    <div class="text">
        <h1>Why are you here?</h1>
    </div>
    <div class="main">
        <div class="container">
                <img src="http://t15.deviantart.net/iy-wsIkQ2wP7g08wOsW4mi_daNM=/fit-in/700x350/filters:fixed_height(100,100):origin()/pre14/e387/th/pre/f/2010/096/1/b/dollars___logo_vector_by_xxkaiserxx.png" alt="dollars logo" id="logo">
                <form action="../php/index.php" method="post" id="form">
                    <label for="password">PASSWORD:</label><input type="password" name="password" id="password" maxlength="16" required>
                    <input type="submit" name="submit" id="submit" required>
                </form>
        </div>
    </div>
</body>

Js Fiddle for the above question

Fixed!

By adding another setTimeout function, we are able to postpone the expansion and correctly expand the logo.

Update JS:

function fadeIn(){
    var el = document.querySelector("h1");
    el.style.opacity= 1;
    el.style.transition="opacity 1.0s ease-in-out 0s";
}

window.addEventListener("keypress",checkKeyPress,false);


function checkKeyPress(key){
    var el = document.querySelector("h1");
    var el2 = document.querySelector(".main");
    var el3 = document.querySelector(".text");
    var el4 = document.getElementById("logo");
    if(key.keyCode=="36"){
        el.style.opacity=0;
        setTimeout(function() {
            el.style.display="none";
            el3.style.display="none";
            el2.style.display="block";
            setTimeout(function(){
                el4.style.transition = "all 1.0s ease-in-out";
                el4.style.transform = "scale(1) rotate(0deg)";
            },50);
        }, 1000);
    }
}

can you give us jsfiddle of what you are trying to do? also, what is inside the fadeIn() function? — redanesc, Oct 09 '17 at 05:01
@Redan inside the fadeIn() function is text. there should be a code snippet available now. — , Oct 09 '17 at 05:14

Shadow Fiend · Answer 1 · 2017-10-13T01:26:40.013

Try something like this

function fadeIn() {
  var el = document.querySelector("h1");
  el.style.opacity = 1;
  el.style.transition = "opacity 1.0s linear 0s";
}

window.addEventListener("keypress", checkKeyPress, false);


  
function checkKeyPress(key) {
  var el = document.querySelector("h1");
  var el2 = document.querySelector(".main");
  var el3 = document.querySelector(".text");
  var el4 = document.getElementById("logo");
  el4.style.height= 0;
  if (key.keyCode == "36") {
    el.style.opacity = 0;
    setTimeout(function() {
      el.style.display = "none";
      el3.style.display = "none";
      el2.style.display = "inline";
      el4.className += " height";
    }, 1000);
  }
}

* {
  font-family: helvetica;
  padding: 0px;
  margin: 0px;
}

body {
  height: 100vh;
  width: 100%;
  background-color: black;
}

.text {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: ". . ." ". center ." ". . .";
}

h1 {
  grid-area: center;
  color: white;
  justify-self: center;
  align-self: center;
  opacity: 0;
}
.height{
  width:100px;
  animation: anim 1.0s linear 0s forwards;
}
@keyframes anim{
 0%{
  height:0px;
 -ms-transform: scale(0); /* IE 9 */
-webkit-transform: scale(0); /* Safari */
transform: scale(0);
 }
  100%{
    height:800px;
     -ms-transform: scale(1); /* IE 9 */
    -webkit-transform: scale(1); /* Safari */
    transform: scale(1);
  }
}
.main {
  display: none;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 12fr 1fr 1fr;
  grid-template-areas: ". logo ." ". form ." ". . ."
}

#logo {
  grid-area: logo;
}

#form {
  grid-area: form;
  justify-self: center;
}

#password {
  display: none;
  opacity: 0;
  height: 21px;
  width: 170px;
  border-style: none;
  border-radius: 6px;
  text-align: center;
  font-size: 24px;
}

label {
  color: white;
  padding-right: 3px;
  display: none;
  opacity: 0;
}

#submit {
  display: none;
}

<body onload="fadeIn()">
  <div class="text">
    <h1>Why are you here?</h1>
  </div>
  <div class="main">
    <div class="container">
      <img src="http://t15.deviantart.net/iy-wsIkQ2wP7g08wOsW4mi_daNM=/fit-in/700x350/filters:fixed_height(100,100):origin()/pre14/e387/th/pre/f/2010/096/1/b/dollars___logo_vector_by_xxkaiserxx.png" alt="dollars logo" id="logo">
      <form action="../php/index.php" method="post" id="form">
        <label for="password">PASSWORD:</label><input type="password" name="password" id="password" maxlength="16" required>
        <input type="submit" name="submit" id="submit" required>
      </form>
    </div>
  </div>
</body>

Keycode 36 is the $ sign, so in this case the key up function would not work, any other suggestions? — , Oct 09 '17 at 06:55
@UrmzdMu use keypress. I change it to keypress. Try to press $. — Shadow Fiend, Oct 09 '17 at 06:59
it works, however, would it also function if lets say the height was 800px but the scale differed from 0 - 1 — , Oct 09 '17 at 07:10
yes, it doesnt work for some reason? any clues as to why? @shadowfiend — , Oct 09 '17 at 16:59
@UrmzdMu just mark this as the answer if it solve your problem :) — Shadow Fiend, Oct 11 '17 at 04:47
one more question sorry, but the scale is weird it scales while height increases, if you remove the height aspect and leave the default height + width and just scale from 0 - 1, would a smoother transition occur? — , Oct 13 '17 at 01:17
yup, it just expands upwards @shadowfiend, however I fixed the function by adding another settimeout function. It works fine now. Thank you very much! — , Oct 13 '17 at 02:34

score 0 · Answer 2 · answered Oct 09 '17 at 05:45

0

Change to:

window.addEventListener("keyup",checkKeyPress,false);

answered Oct 09 '17 at 05:45

tyelford

607
2
8
18

keycode 36 is the $ symbol, so the keyup event in this case would not work, any other suggestions? – Oct 09 '17 at 06:52
Keycode 36 is the home button, have a look at this table. https://css-tricks.com/snippets/javascript/javascript-keycodes/. $ is not a key on the keyboard but a character https://stackoverflow.com/questions/11868643/what-is-the-keycode-for – tyelford Oct 09 '17 at 14:55
w3.org/2002/09/tests/keys.html when attempting the keycode 36 on this website and it seems as the values differ on keyup keydown and keypress. – Oct 09 '17 at 21:00

Is it possible to have a transformation in Javascript without a trigger?

2 Answers2