Security Simplified

Creating CSS3 Transitions and Animations in CSS and triggering them with Javascript

Example #1

This example shows the menu in my personal project. The menu button on the mobile version triggers a CSS change, which does a sliding transition on to the screen. You can see this in action on my personal project

HTML

<header>
    <button id="showLeft"><img src="/assessments/cit-261-personal-project/images/mobile_menu_button.png" alt="menu button"></button>
</header>
<nav class="mob-menu" id="mob-menu">
    <h3>Menu</h3>
        <a href="#" class="garageLink">Garage</a>
        <a href="#" class="recordLink">Record</a>
        <a href="#" class="journalLink">Journal</a>
        <a href="#" class="nextMaintenanceLink">Next Maintenance</a>
</nav>

CSS

@media only screen and (min-width:950px) {
    #showLeft {
        display: none;
    }

    .mob-menu {
        display: none;
    }
}

@media only screen and (min-width:481px) and (max-width:949px) {
    #showLeft {
        display: inline-block;
    }

    .mob-menu {
        font-size: 90%;
        width: 190px;
        left: -190px;
    }
}

@media only screen and (max-width:480px) {
    #showLeft {
        display: inline-block;
    }

    .mob-menu {
        font-size: 90%;
        width: 190px;
        left: -190px;
    }
}

.mob-menu {
	background: #47a3da;
	position: fixed;
	width: 240px;
	height: 100%;
	top: 0;
	z-index: 1000;
	left: -240px;
	transition: 0.3s;
}


.mob-menu h3 {
	color: #FFFFFF;
	font-size: 1.9em;
	padding: 20px;
	margin: 0;
	font-weight: 300;
	background: #0d77b6;
}

.mob-menu a {
	display: block;
	color: #FFFFFF;
	font-size: 1.1em;
	font-weight: 300;
	border-bottom: 1px solid #258ecd;
	padding: 1em;
}

.mob-menu a:hover {
	background: #258ecd;
}

.mob-menu a:active {
	background: #afdefa;
	color: #47a3da;
}

.mob-menu.mob-menu-open {
	left: 0px;
	transition: 0.3s;
}

#showLeft {
    width: 100px;
    height: 100px;
    position: absolute;
    right: -10px;
    top: -20px;
    border: none;
    background-color: transparent;
}

Javascript

var menuLeft = document.getElementById("mob-menu");
var showLeft = document.getElementById("showLeft");

// DEFINE FUNCTIONS
function showLeftFunction() {
    if(hasClass(menuLeft, "mob-menu-open")) {
        menuLeft.className = "mob-menu";
    } else {
        menuLeft.className += " mob-menu-open";
    }
};

function hasClass(element, cls) {
    return (" " + element.className + " ").indexOf(" " + cls + " ") > -1;
}

// ATTACH EVENTS
showLeft.addEventListener('click', showLeftFunction);

Example #2

This example shows the garage in my personal project. When you select a new car is shows an animation to show you which car you selected. You can see this in action on my personal project

HTML

<div id="garage">
  <p id="selected">2012 Honda Odyssey</p>
  <p>2008 Chevrolet Silverado 1500</p>
</div>

CSS

#garageList p#selected {
    background-color: #871065;
    color: #FFFFFF;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
    animation-name: selectionAnimation;
    animation-duration: 1.0s;
}

@keyframes selectionAnimation {
    0%      {background-color: #871065;}
    25%     {background-color: #debdcd;}
    50%     {background-color: #871065;}
    75%     {background-color: #debdcd;}
    100%    {background-color: #871065;}
}

Javascript

function selectVehicle() {
    var selectedVehicleList = JSON.parse(localStorage.getItem("vehicleList"));
    var selectedVehicleId = localStorage.getItem("selectedVehicle");
    var selectedVehicleText = "No vehicle selected";
    if(selectedVehicleId !== null && selectedVehicleId !== "") {
        var selectedVehicle = selectedVehicleList[selectedVehicleId];
        selectedVehicleText = selectedVehicle.year + " " + selectedVehicle.make + " " + selectedVehicle.model;
    }
    var selectedVehicleElements = document.getElementsByClassName("selectedVehicle");
    for(var i = 0; i < selectedVehicleElements.length; i++) {
        selectedVehicleElements[i].textContent = selectedVehicleText;
    }
}

function changeVehicle(e) {
    var oldSelection = Number(localStorage.getItem("selectedVehicle"));
    var vehicleList = JSON.parse(localStorage.getItem("vehicleList"));
    if(e.target && e.target.class === "vehicle" && e.target.innerText !== "No vehicles found") {
        var el = e.target;
        while (el !== document.body && el.tagName !== "P") {
            el = el.parentNode;
        }
        var index = [].indexOf.call(el.parentNode.children, el);
        localStorage.setItem("selectedVehicle", index);
        document.getElementById("recordModelYearId").value = vehicleList[index].modelYearId;
        selectVehicle();
        updateJournalList();
        updateNextMaintenance();
        el.id = "selected";
        if(oldSelection !== null && oldSelection !== "" && oldSelection !== index) {
            var elParent = el.parentNode;
            elParent.childNodes[oldSelection].removeAttribute("id");
        }
    }
}