Materialize 1.0.0-beta (CSS Transitions)

Navigation
2

I'm new to the front end in general, I have basic knowledge of html and css, I'd like to use materialize and understand this function here. link

As I try to use these codes on the page only I can not use the Toggle Scale on my page 

  <!-- Scaled in -->
  <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
    <i class="material-icons">add</i>
  </a>

  <!-- Scaled out -->
  <a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition scale-out">
    <i class="material-icons">add</i>
  </a>

I have already inspected the page itself to see how they did it but in practice I can never use this function to click and hide an object, I copied the codes to mine but it still does not work (the materialize files are organized and copied the html they recommend) 

<a id="scale-demo-trigger" href="#!" class="btn right">Toggle Scale</a>

I even used this source code above the page to activate the Toggle Scale but it still does not work, I would like a functional example if possible for me to understand in practice, thanks in advance.

    
asked by anonymous 02.04.2018 / 01:06

1 answer

1

In fact you need to create a code that changes the classes, I made an example where the click disappears and returns 1 second later: 

var scale = document.getElementById('scale-demo')

var b = true

scale.addEventListener('click', function() {
  if (b) {
    scale.className = 'btn-floating btn-large scale-transition scale-out'
    setTimeout(function() {
      scale.className = 'btn-floating btn-large scale-transition scale-in'
    }, 1000)
  } else {
    scale.className = 'btn-floating btn-large scale-transition scale-in'
  }
})
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script><linktype="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" media="screen,projection" />

<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
  <i class="material-icons">add</i>
</a>

Materialize has these classes but it is only the effect of "decrease" and "increase", they do not happen on their own, you should define use

    
02.04.2018 / 01:38
Service Discovery Eureka Netflix Problems using setlocale () in c