Materialize 1.0.0-beta (CSS Transitions)

Asked

Viewed 146 times

2

I am new in front end in general, I have basic knowledge of html and css, I would like to use the materialize and understand this function here. http://materializecss.com/css-transitions.html

because I try to use these codes present on the page only that 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 already inspected the page itself to see how they did but in practice I can never use this function to click and hide an object, copied the codes to mine but still not right (the files of materialize are organized and copied the html that they recommend)

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

I even used this source code above present on the page to activate the "Toggle Scale" but even so does not work, I would like a functional example if possible for me understand in practice, from now, thank you.

html css front-end materialize transition

  • Set the library scripts?

  • From what I saw. You didn’t set the library. This link is explaining. Take the option for Cdn for being the fastest. http://materializecss.com/getting-started.html

  • Yes, I put everything correctly as it is on the site, because the other components are working, I did not know that in the case this "css Transition" of materialize had to define the use via javascript.

2 answers

1


actually you need to create a code that changes the classes, I made an example where click makes disappear and back 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>

<link type="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 are only the effect of "decrease" and "increase", they do not happen on their own, you must define the use

0

I found an interesting solution that matches the reference model of the site

function toggleButton() {
  var scale = document.getElementById('scale-demo');
  scale.classList.toggle('scale-out');
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<a id="scale-demo" href="#!" class="btn-floating btn-large scale-transition">
  <i class="material-icons">add</i>
</a>
<a id="scale-trigger" href="#!" onclick="toggleButton()" class="btn-large">
            Toggle
        </a>

Browser other questions tagged html css front-end materialize transition

You are not signed in. Login or sign up in order to post.