W3 CSS Animation

Question

I feel dumb for asking this. Let's start off by I used a W3 responsive template. I love everything about it and even incorporated the single page application design aspect using AngularJS. Now here's my one question.

When whoever is on a mobile device using the website, they get a menu option that opens a sidenav. This animation is called "w3-animate-left" and it pulls the nav from -300px to 0px as shown below. Now what I want to do is make one that animates from 0px to -300px and incorporate it to my existing CSS.

.w3-animate-left {
    position: relative;
    -webkit-animation: animateleft 0.4s;
    animation: animateleft 0.4s;
}
@-webkit-keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}
@keyframes animateleft {
    from {
        left: -300px;
        opacity: 0;
    }
    to {
        left: 0;
        opacity: 1;
    }
}

Then I ran into another obstacle, the div containing the class call to the CSS above incorporates it in the class as shown below.

<div class="w3-sidenav w3-white w3-card-2 w3-animate-left w3-hide-medium w3-hide-large" style="display:none" id="mySidenav" ng-controller="mainController">
    <a href="" ng-click="redirectToPackages()" onclick="w3_close()"><i class="fa fa-birthday-cake"></i> PACKAGES</a>
    <a href="" ng-click="redirectToOpenPlay()" onclick="w3_close()"><i class="fa fa-child"></i> OPEN PLAY</a>
    <a href="" ng-click="redirectToGallery()" onclick="w3_close()"><i class="fa fa-camera-retro"></i> GALLERY</a>
    <a href="" ng-click="redirectToContact()" onclick="w3_close()"><i class="fa fa-envelope"></i> CONTACT</a>
</div>

Here's the JavaScript as well:

<script>
    // Toggle between showing and hiding the sidenav when clicking the menu icon
    var mySidenav = document.getElementById('mySidenav');

    function w3_open() {
        if (mySidenav.style.display === 'block') {
            mySidenav.style.display = 'none';
        } else {
            mySidenav.style.display = 'block';
        }
    }
    function w3_close() {
        mySidenav.style.display = 'none';
    }
</script>

Now the problem here is even if I made the edit to the W3 CSS that I wanted, how would I be able to incorporate it so that when they click to close, it does the custom animation that I asked?

Also how can I add it that if they click somewhere off the screen, it exits the side nav? Thank you in advance!

hdotluna · Accepted Answer · 2017-02-13T08:05:43.420

var _open = document.getElementById("open"),
    _navigation = document.getElementById("navigation");

_open.onclick = function() {
  _navigation.classList.toggle("openNav");
}

* {
  margin: 0;
  padding: 0; }

#open {
  position: absolute;
  right: 0;
  cursor: pointer; }

#navigation {
  background: black;
  width: 300px;
  height: 100vh;
  transform: translateX(-300px);
  transition: all 0.3s linear; }

#navigation.openNav {
  transform: translateX(0); }

<a id="open">Open/Close</a>

<div id="navigation"></div>

This is my method on creating navigation animation and not based on someone's work. This will not work in old browsers.

The technique you just need is the transform, transition and adding class. You don't need to use animation.

By adding class of openNav, it will change the value of transform: translateX and it allows the navigation to be shown in browser.

Take note that you can't animate display attribute in css. You can use opacity for fadeIn/fadeOut.

Hope it helps. Cheers!

W3 CSS Animation

1 Answers1