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">
<i class="fa fa-birthday-cake"></i> PACKAGES
<i class="fa fa-child"></i> OPEN PLAY
<i class="fa fa-camera-retro"></i> GALLERY
<i class="fa fa-envelope"></i> CONTACT
</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!
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!
Related
first time post here. a beginner.
What I'm trying to do here is that:
I'm trying to display an image of a silhouette of a person. And with every click, the current image fades out and another image of the same person (different position/location) fades in. kind of like an animation except very bare bones.
I made a variable that supposedly controls when certain images fade in or out(var currentscene).The button that calls the function covers the entire page and is invisible because I want the animation to move frame by frame with a click anywhere from the page.
('stand' is an image of a boy standing and 'sit' is an image of a boy sitting) edit: in the example it becomes squareblue and squarered.
(fade-in and fade-out are classes that I add to the image so the transition triggers)
And yet the problem is that a single click will fade in both pictures, as if the number on the variable (currentscene) doesn't matter or the onclick event registered infinite number of clicks or something like that.
Im trying to make the blue square fade in on the first click and the blue fade out and the red fade in on the second click of the button.
If there is a fix to this that would be helpful. If there is a whole another way to do what I'm trying to accomplish, I'm all ears. Although I've tried looking into arrays and EventListeners but I haven't been successful.
heres a recreation of the problem:
var currentscene = 0;
function next() {
currentscene++;
if (currentscene = 1) {
var element = document.getElementById("blue");
element.classList.add("fade-in");
}
if (currentscene = 2) {
var element = document.getElementById("blue");
element.classList.add("fade-out");
var element = document.getElementById("red");
element.classList.add("fade-in");
}
}
.squareblue {
height: 50px;
width: 50px;
top: 50px;
background-color: blue;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.squarered {
height: 50px;
width: 50px;
top: 100px;
background-color: red;
position: absolute;
opacity: 0;
animation-fill-mode: forwards;
}
.fade-out {
animation: fadeOut ease 2s
}
#keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fade-in {
animation: fadeIn ease 2s
}
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>
<button class="button" onclick="next()">next</button>
I have mobile navigation bar that toggles on clicking the burger and everything works fine. The navigational links have animation that needs to be triggered every time when there is no animation on them (achieved with JavaScript, code will be shown below) and everything works fine until the moment I click on one navigational link. So the navigation bar closes, and the animation is triggered on closing, thus not on opening and the next time I click on the burger in order to open the menu the animation does not play. BUT, the thing that confuses me the most is that after clicking on one of the navigational links, on the next menu-opening the animation is here and everything works fine (the bug comes after clicking on one of the navigational links).
How to make the animation play every time on opening the menu?
HTML code:
<nav>
<div class="logo">
Portfolio
</div>
<ul class="nav-links">
<li>Home</li>
<li>About Me</li>
<li>Skills</li>
<li>Contact</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
CSS code:
// if nav is active translate him to 0 (since he is translated)
.nav-active {
transform: translateX(0%);
}
.nav-links {
position: absolute;
right: 0;
height: 93vh;
top: 7vh;
background-color: white;
box-shadow: 0 5px 50px white;
display: flex;
flex-direction: column;
justify-content: center;
width: 40%;
transform: translateX(110%);
transition: transform 0.5s ease-in;
}
.nav-links li {
opacity: 0;
list-style: none;
display: flex;
align-items: center;
flex-direction: column;
}
.nav-links a {
margin-left: 0;
color: #3e689d;
font-size: 2.2em;
margin-bottom: 50px;
transition: 0.5s ease;
padding: 30px 30px;
}
.burger div {
width: 40px;
height: 5px;
background-color: white;
margin: 5px;
transition: all 0.5s ease;
}
//animation for burger
.toggle .line1 {
transform: rotate(-45deg) translate(-6.5px, 7.5px);
}
.toggle .line2 {
background-color: black;
transform: translateX(-100px) scale(0);
}
.toggle .line3 {
transform: rotate(45deg) translate(-6.5px,-7.5px);
}
// animation for links
#keyframes navLinkFade {
from {
opacity: 0;
transform: scale(0) rotate(90deg);
}
to {
opacity: 1;
transform: scale(1);
}
}
JavaScript code:
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
const navLinks = document.querySelectorAll('.nav-links li');
const navigationItems = document.querySelectorAll('.nav-links a');
// if there is no animation on the links add the one that I have declared in CSS
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
navLinks.forEach((link, index) => {
// I think the problem is in this if/else statement
if (link.style.animation) {
link.style.animation = ''
}
else {
link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
}
});
// toggle the burger animation that I have declared in CSS
burger.classList.toggle('toggle');
// close the menu and the burger on clicking on one of the navigational links
navigationItems.forEach((navigationItem) => {
navigationItem.addEventListener("click", () => {
nav.classList.remove('nav-active');
burger.classList.remove('toggle');
});
});
});
}
navSlide();
Thank you, grateful for any help.
I just noticed that I forgot to remove the animation in the event listener that had the task to close the navigation bar and the problem was occurring because the navigation bar was closing but the navigational links still had the animation on them. So to solve my problem I just needed to add two lines of code that will remove the animation when the navigation bar closes.
Here is the solution :
navigationItems.forEach((navigationItem) => {
navigationItem.addEventListener("click", () => {
//I was missing the next two lines of code to remove the animation from my navigational links when the navigational bar closes
navLinks.forEach((link) => {
link.style.animation = ''
});
nav.classList.remove('nav-active');
burger.classList.remove('toggle');
});
});
Problem solved.
I'm having an issue with a notification system I am building.
All works fine till the end where my javascript is triggered to remove the show class from the notification div. When the class is removed, there is a brief flash to the start position of the div.
Example here
JS to show notification:
function showNotification() {
notificationRef.current.classList.add("nShow");
setTimeout(() => {
notificationRef.current.classList.remove("nShow");
}, 4000);
}
Notification CSS has general positioning and styling with visibility: hidden and top: 85px set.
nShow (class to show notification):
.notification.nShow {
visibility: visible;
animation: fadeNotiIn 1s, fadeNotiOut 1s 3s;
}
#keyframes fadeNotiIn {
from {
top: 0;
opacity: 0;
}
to {
top: 85px;
opacity: 1;
}
}
#keyframes fadeNotiOut {
from {
top: 85px;
opacity: 1;
}
to {
top: 0;
opacity: 0;
}
}
It seems that visibility: hidden is being set after opacity: 1 so there is a flash when removing the show class.
Thanks
Here is a sample. I would not advise you to use animation here. Between the two animations you plan, your element goes back to its default state and that's making things ugly.
Instead, what I would do is use a short transition to smooth a bit the thing between the two states, and keep handling it through JS.
const notification = document.querySelector('.notification');
function startNotification() {
notification.classList.add("nShow");
setTimeout(() => {
notification.classList.remove("nShow");
}, 3000);
}
.notification {
opacity: 0;
position: absolute;
top: 0px;
transition: all 1s;
}
.notification.nShow {
top: 85px;
opacity: 1;
}
.root {
position: relative;
}
<button onclick="startNotification()">Start notification</button>
<div class="root">
<div class="notification">Hello</div>
</div>
As said in the first version, I don't think you should go for visibility and opacity at the same time, and since you are already using opacity, let's use it completely.
I have some texts in my site that I want to show only when the user clicks at the title and then the text appears with an animation, and when the user clicks again at the title the text disappears. I made this code bellow that is working awesome for "show more" but for some reason its not working for "show less"!
function showMore(resp) {
if (document.getElementById(resp).style.maxHeight == "400") {
document.getElementById(resp).style.animation = "showmore 2s ease-in-out reverse";
document.getElementById(resp).style.maxHeight = "0";
} else {
document.getElementById(resp).style.animation = "showmore 2s ease-in-out";
document.getElementById(resp).style.maxHeight = "400";
}
}
#keyframes showmore {
0% {
opacity: 0;
max-height: 0;
}
100% {
opacity: 1;
max-height: 400px;
}
}
.awr {
text-align: left;
margin-left: 10px;
font-size: 17;
color: dimgrey;
max-height: 0;
overflow: hidden;
}
<div class="question" onclick="showMore('awr1')">
<h3>How it Works?</h3>
</div>
<div class="awr" id="awr1">
<p>this is the text that must be hidden.</p>
</div>
Can anyone help me?
I implemented in jQuery but you can easily transform into Javascript.
You can simply add a class & toggle it.
function showMore(resp) {
$("#" + resp).toggleClass("show");
}
.awr {
text-align: left;
margin-left: 10px;
font-size: 17;
color: dimgrey;
height: 0px;
visibility: hidden;
transition: all 0.3s linear;
background-color: #F1F1F1;
}
.show {
visibility: visible;
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question" onclick="showMore('awr1')">
<h3>How it Works?</h3>
</div>
<div class="awr" id="awr1">
<p>this is the text that must be hidden.</p>
</div>
You can do this with css transition instead of animation. Transition basically watches the given properties for changes and animates it from one state to the next. You can also use the all keyword here if you just want everything to animate when it's changed.
.show {
opacity: 1;
max-height: 400px;
}
.awr {
/* your other styles here */
opacity: 0;
max-height: 0;
transition: all 2s;
}
If I'm not mistaken, easing is default behavior, too. Then toggle the class with JavaScript however you usually would. For example, this is my preferred method:
const showMore = resp => document.querySelector(`#${resp}`).classList.toggle('show')
I need to add a fade effect on my javascript function
Javascript
<script type="text/javascript">
window.onload=function() {
loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
closebtn = document.getElementById('closelogin');
loginBtn.onclick=function(){
fader.style.display = "block";
login_box.style.display = "block";
}
closebtn.onclick=function() {
fader.style.display = "none";
login_box.style.display = "none";
}
}
</script>
HTML
<div id="login_fader"> </div>
<div id="login_box">
<table class="table-login">
<th>Login or Register</th>
<th><a id="closelogin">X</a></th>
<tr>
<td>Login</td>
<td>Register</td>
</tr>
</table>
</div>
CSS
<style type="text/css">
#loginBtn {
float: right;
margin-top: -6%;
cursor:pointer;
}
#login_fader {
background: black;
opacity: .5;
-moz-opacity: .5;
-filter: alpha(opacity=50);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
display: none;
}
#login_box {
width: 320px;
height: 200px;
border: 1px white solid:
background: #5a5a5a;
position: fixed;
top: 25%;
left: 35%;
z-index: 10;
display: none;
}
.table-login {
background: #FFF;
border-radius: 8px;
box-shadow: 0 0 5px 2px;
opacity: 0.95;
}
#closelogin {
float:right;
cursor:pointer;
}
</style>
Js fiddle
http://jsfiddle.net/U3n4j/
I have tried using the transition properties from css3 and tried applying both to login_box and login_fader.
I found some functions on the net but don't know how to link them to my already made function and i was thinking if there are any properties directly that i can link them to my function.
Proper way to fade in a static box in css3 and js 1.7 ++
This is a example using only webkit and modern javascripts classList.add
but you can add the other prefixes.-moz,-ms,-o
in this example i show only the animation.
css
.box{
width:100%;
height:100%;
position:fixed;
left:0;top:-100%;/*notice TOP -100%*/
opacity:0;
-webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
background-color:rgba(0,0,0,0.7);
}
.box.active{
-webkit-transition:opacity 700ms ease,top 0 linear 0;
/*top transition not needed but could help to understand*/
top:0;
opacity:1;
}
js
function show(){
box.classList.add('active');
}
function hide(){
box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
DEMO
http://jsfiddle.net/RAu8Q/ not working anymore
http://jsfiddle.net/RAu8Q/17/ new syntax 10-2015
if you have any questions just ask.
I can't tell exactly what effect you're trying to achieve, but if you're going to use CSS transitions, then you need to be transitioning between numerical properties. I.e., you can't expect a fade to occur simply by transitioning from display:block to display:none. You'd want to use opacity instead.
First of all, don't try to use css transitions in conjunction with display property, that won't work! Instead, try transitioning other properties. Let's take opacity for instance (we'll simulate display: none/block functionality by setting opacity to 0/1)
Secondly, set the start value for opacity to 0 on the desired HTML element (the one you'd like to animate). Specify which property to animate (opacity in our case):
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;
When the login button is clicked, set opacity to 1:
loginBtn.onclick=function() {
fader.style.opacity = 1;
login_box.style.opacity = 1;
}
When the close button is clicked, set opacity back to 0:
closebtn.onclick=function() {
fader.style.opacity = 0;
login_box.style.opacity = 0;
}
Link to fiddle.
I believe that what you want to do needs css animations. So just create an animation class that fades out the target element and apply it after the user logs in.
#keyframes fadeOut {
from: {
opacity:1;
},
to: {
opacity:0;
}
}
then use apply it on the class
.fadeOut {
animation:fadeOut 0.25s forwards;
}
EXAMPLE
http://jsfiddle.net/zgPrc/