Vue: CSS animations on class change - javascript

I am creating a hamburger menu component in Vue but for some reason the animations do not work. It gets to what should be the end result of the animation, but there is no animation.
I trigger the animation through a class change.
I've read up some on Vue transitions but to me it seems like those are mostly used when actually removing or adding elements, which I am not doing, just changing styling in an element.
I include the whole component below, if it is of any help.
<template>
<div id="hamburgerWrapper" #click="changeClass()">
<div id="hamburger1" :class="classObject"></div>
<div id="hamburger2"></div>
<div id="hamburger3" :class="classObject"></div>
</div>
</template>
<script>
export default {
name: "hamburger",
data() {
return {
active: false
};
},
computed: {
classObject: function(){
return {
in: this.active,
out: !this.active
}
}
},
methods: {
changeClass(){
this.active = !this.active
}
}
};
</script>
<style lang="scss">
$height: 300px;
$width: $height;
#hamburgerWrapper{
margin-top: 30px;
margin-left: 30px;
width: $width;
height: $height;
background-color: rgb(192, 192, 192);
position: relative;
cursor: pointer;
#hamburger1,#hamburger2,#hamburger3{
position: absolute;
height: $height * 0.2;
width: $width;
background-color: blue;
border-radius: $height * 0.1;
}
#hamburger1{
top: 0;
//transform: translateY(($height/2)-($height * 0.1));
&.in{
animation: topIn 1s ease forwards;
}
&.out{
animation: topIn 1s ease reverse forwards;
}
}
#hamburger2{
top: 50%;
transform: translateY(-50%);
}
#hamburger3{
bottom: 0;
&.in{
animation: botIn 1s ease forwards;
}
&.out{
animation: botIn 1s ease reverse forwards;
}
}
}
#keyframes topIn {
0% {transform: translateY(0) rotate(0deg)}
50% {transform: translateY(($height/2)-($height * 0.1)) rotate(0deg)}
100% {transform: translateY(($height/2)-($height * 0.1)) rotate(45deg)}
}
#keyframes botIn {
0% {transform: translateY(0) rotate(0deg)}
50% {transform: translateY(-(($height/2)-($height * 0.1))) rotate(0deg)}
100% {transform: translateY(-(($height/2)-($height * 0.1))) rotate(-45deg)}
}
</style>

I changed the "out"-animation to not do the reversed "in"-animation, but instead just an own animation. That somehow worked.

Related

Animate center div while hiding sidebars using Vue Transitions

I want to add some animations to my website. My goal is to expand the center div while the sidebars are sliding away. So far I've only accomplished the movement of the sidebars, but I'm struggling to make the center go along with them.
I've tried to add a Transition to the center div as well, but I realized it doesn't go into a enter / leave state like the sidebars so I tried to use a watcher after that but I've been
stuck for a while.
var app = new Vue({
el: '#app',
data: {
showSidebars: true,
},
methods: {
animate() {
this.showSidebars = !this.showSidebars;
}
}
});
.container {
display: flex;
width: 600px;
height: 200px;
margin-bottom: 1em;
}
.sidebar {
flex-grow: 1;
background-color: #564D95;
}
.center {
flex-grow: 3;
background-color: #242C44;
transition: all 0.3s linear;
}
.center:hover {
flex-grow: 5;
}
/* Vue Transitions */
.expand-left-enter-active {
animation: expand-left 0.3s ease reverse;
}
.expand-left-leave-active {
animation: expand-left 0.5s ease;
}
.expand-right-enter-active {
animation: expand-right 0.3s ease reverse;
}
.expand-right-leave-active {
animation: expand-right 0.5s ease;
}
#keyframes expand-left {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(-100%);
}
}
#keyframes expand-right {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
<!-- left -->
<transition name="expand-left">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
<!-- center -->
<div class="center"></div>
<!-- right -->
<transition name="expand-right">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
</div>
<button #click="animate">Animate</button>
</div>
Thanks to this question I was able to find a solution. I just added a class with a computed and made the transition there.
var app = new Vue({
el: '#app',
data: {
showSidebars: true,
},
methods: {
animate() {
this.showSidebars = !this.showSidebars;
}
},
computed: {
expanded() {
return !this.showSidebars ? 'expanded' : '';
}
}
});
.container {
display: flex;
width: 600px;
height: 200px;
margin-bottom: 1em;
}
.sidebar {
flex-grow: 1;
background-color: #564D95;
}
.center {
flex-grow: 3;
background-color: #242C44;
transition: all 0.5s linear;
}
.center.expanded {
flex-grow: 25;
}
/* Vue Transitions */
.expand-left-enter-active {
animation: expand-left 0.3s ease reverse;
}
.expand-left-leave-active {
animation: expand-left 0.5s ease;
}
.expand-right-enter-active {
animation: expand-right 0.3s ease reverse;
}
.expand-right-leave-active {
animation: expand-right 0.5s ease;
}
#keyframes expand-left {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(-100%);
}
}
#keyframes expand-right {
0% {
opacity: 1;
transform: translate(0%);
}
100% {
opacity: 0;
transform: translate(100%);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="container">
<!-- left -->
<transition name="expand-left">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
<!-- center -->
<div class="center" :class="expanded"></div>
<!-- right -->
<transition name="expand-right">
<div v-show="showSidebars" class="sidebar"></div>
</transition>
</div>
<button #click="animate">Animate</button>
</div>

React how to reset GIF upon project refresh?

Given :
function App() {
return (
<div className="container">
<span>
</span>
</div>
);
}
ReactDOM.render(<App />, document.querySelector("#app"));
.container {
background-color: black;
width: 100vw;
height:100px;
display: flex;
position: relative;
}
.container::before {
background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:35px;
bottom:-10px;
position:absolute;
z-index: 999 !important;
}
.container::after {
background: url('https://s9.gifyu.com/images/chain.gif');
background-size:cover;
content: '';
width: 100px;
height:100px;
right:80px;
bottom:-15px;
position:absolute;
rotate: -10deg;
z-index: 999 !important;
}
.container > span:before {
content: '';
background-color: rgb(231, 231, 231);
width: 75px;
height:40px;
right:80px;
bottom:-55px;
rotate: -7deg;
border: 3px solid rgb(126, 126, 126);
border-radius: 10px 10px 10px 10px;
position:absolute;
z-index: 999 !important;
/* transform: rotate(1deg) translate(279px, 28px);
animation: T-animation 3s linear infinite alternate-reverse; */
animation: animationFrames linear 6.25s;
animation-iteration-count: infinite;
transform-origin: 100% 0%;
animation-fill-mode:forwards; /*when the spec is finished*/
-webkit-animation: animationFrames linear 6.25s;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 100% 0%;
-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
}
#keyframes animationFrames{
0% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
20% {
transform: translate(-14px,-8px) rotate(-3deg) ;
}
29% {
transform: translate(-14px,-8px) rotate(-3deg) ;
}
51% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
72% {
transform: translate(65px,-1px) rotate(7deg) ;
}
79% {
transform: translate(65px,-1px) rotate(7deg) ;
}
100% {
transform: translate(35px,-2px) rotate(-3deg) ;
}
}
#-webkit-keyframes animationFrames {
0% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
20% {
-webkit-transform: translate(-14px,-8px) rotate(-3deg) ;
}
29% {
-webkit-transform: translate(-14px,-8px) rotate(-3deg) ;
}
51% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
72% {
-webkit-transform: translate(65px,-1px) rotate(7deg) ;
}
79% {
-webkit-transform: translate(65px,-1px) rotate(7deg) ;
}
100% {
-webkit-transform: translate(35px,-2px) rotate(-3deg) ;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="app"></div>
with JSFiddle link here,
I want to find a way to run the background gifs and the animations at the same time upon refresh or something similar. Currently, if you click run code snippet they are probably synchronized, but if the page is refreshed the gifs keep playing in the background whilst the animation is reloaded.
For instance if the run code snippet is clicked multiple times, the gif just keeps playing continuously while the animation restarts.
It is tedious for me to design this animation if every time I restart my program the gif and the animation are unsynchronized.
Things I have tried
I have tried changing <div className="container" /> to <div />, refresh, then change back, but that doesn't seem to fix it. I have also tried to change my App.js to
const [loaded,setState] = React.useState("container");
const reloadGif = () => {
React.setState({loaded: ''})
setTimeout(() => {
React.setState({loaded: "container"})
}, 0)
}
return (
<div className={loaded}>
<button onClick={reloadGif}>Reset</button>
<span>
</span>
</div>
);
}
ReactDOM.render(, document.querySelector("#app"));
but clicking on the replay button doesn't reset the gif and animation at all.
Does anyone know how I can solve this problem ?

How to sync two animations using css keyframes?

I am working on solution
I have created a basic html banner where I want to keep image and text animations in sync.
Basically image animation is like scale logo for about 3 seconds, meanwhile logo is animated I want text for same in typing effect
I have created basic solution using css and javascript but it is not in sync
var typewriter = function(txt) {
var container = document.getElementById('typewriter'),
speed = 28,
i = 0,
wordsObj = txt.split(" ")
container.textContent = "";
runAllWords();
function runAllWords() {
if (i < wordsObj.length) {
var a = (i == 0) ? i : i - 1;
setTimeout(function() {
showWord(wordsObj[i], 0)
}, wordsObj[a].length * speed);
}
}
function showWord(word, countWord) {
if (countWord < word.length) {
setTimeout(function() {
showLetter(word, countWord)
}, speed);
} else {
container.textContent = container.textContent + " ";
i += 1;
runAllWords();
}
if (i === wordsObj.length) {
console.log('complete')
}
}
function showLetter(word, countWord) {
container.textContent = container.textContent + word[countWord];
showWord(word, countWord + 1);
}
}
var i = 0;
function myLoop() {
// create a loop function
var dataType = document.getElementById('typewriter').dataset.typewriter,
w = dataType.split(',')
setTimeout(function() { // call a 3s setTimeout when the loop is called
typewriter(w[i]); // your code here
i++; // increment the counter
if (i < w.length) { // if the counter < 10, call the loop function
myLoop(); // .. again which will trigger another
} // .. setTimeout()
}, 3000)
}
myLoop();
.addsp_320x50 {
width: 100%;
height: 50px;
position: relative;
}
.addsp_320x50_img {
position: absolute;
top: 1px;
left: 10px;
width: 48px;
height: 48px;
border: 0px solid #ccc;
border-radius: 50%;
}
.addsp_title_text {
position: absolute;
top: 5px;
left: 70px;
font-family: Open Sans;
font-weight: bold;
}
.addsp_title_desc {
position: absolute;
top: 20px;
left: 70px;
font-family: Open Sans;
color: #999;
}
.addsp_320x50_action button {
height: 27px;
background: #058562;
border-radius: 4px;
color: #fff;
border-color: #058562;
font-size: 12px;
font-weight: bold;
font-family: Open Sans;
border-style: solid;
position: absolute;
right: 10px;
top: 10px;
display: flex;
}
.adz_text_1 {}
.adz_text_2 {
animation: text2;
}
.adz_text_1,
.adz_text_2 {}
#keyframes text2 {
0%,
50%,
100% {
width: 0px;
}
60%,
90% {
width: 200px;
}
}
#keyframes text1 {
0%,
50%,
100% {
width: 0px;
}
10%,
40% {
width: 200px;
}
}
#media only screen and (min-width: 320px) {
.addsp_320x50_img {
width: 42px;
height: 42px;
top: 4px;
left: 5px;
}
.addsp_title_text {
top: 14px;
left: 56px;
font-size: 0.85rem;
}
.addsp_title_desc {
top: 25px;
left: 55px;
font-size: 0.8rem;
}
}
#media only screen and (min-width: 480px) {
.addsp_title_text {
top: 3px;
left: 55px;
font-size: 1.1rem;
}
.addsp_title_desc {
top: 28px;
left: 55px;
font-size: 0.8rem;
}
}
#media only screen and (min-width: 600px) {
.addsp_title_text {
top: 3px;
left: 70px;
font-size: 1.1rem;
}
.addsp_title_desc {
top: 28px;
left: 70px;
font-size: 0.8rem;
}
}
#media only screen and (min-width: 800px) {
.addsp_title_text {
top: 3px;
left: 70px;
font-size: 1.1rem;
}
.addsp_title_desc {
top: 28px;
left: 70px;
font-size: 0.8rem;
}
}
.addsp_320x50_img:nth-child(1) {
animation-name: scale;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
.addsp_320x50_img:nth-child(2) {
animation-name: scale;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 4s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
.addsp_320x50_img:nth-child(3) {
animation-name: scale;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 7s;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
opacity: 0;
}
#keyframes scale {
0% {
transform: scale(1);
opacity: 1
}
20% {
transform: scale(1.2);
opacity: 1
}
40% {
transform: scale(1);
opacity: 1
}
60% {
transform: scale(1.2);
opacity: 1
}
80% {
transform: scale(1);
opacity: 1
}
90% {
transform: translateY(-100px);
opacity: 0;
}
100% {
opacity: 0;
}
}
.blinking-cursor {
color: #2E3D48;
-webkit-animation: 1s blink step-end infinite;
-moz-animation: 1s blink step-end infinite;
-ms-animation: 1s blink step-end infinite;
-o-animation: 1s blink step-end infinite;
animation: 1s blink step-end infinite;
}
#keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
#-moz-keyframes blink {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
#-webkit-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
#-ms-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
#-o-keyframes "blink" {
from,
to {
color: transparent;
}
50% {
color: black;
}
}
<div class="addsp_320x50">
<img src="https://de7yjjf51n4cm.cloudfront.net/banners/amazonprime_newicon.jpg" class="addsp_320x50_img">
<img src="https://de7yjjf51n4cm.cloudfront.net/banners/amazonprime_newicon.jpg" class="addsp_320x50_img">
<img src="https://de7yjjf51n4cm.cloudfront.net/banners/amazonprime_newicon.jpg" class="addsp_320x50_img">
<div class="addsp_title_text">
<span class="adz_text_1 typewriter" id="typewriter" data-typewriter="Web Strategy,
UX Testing,
Content Management System,
Web Design,
Research and Analytics,
Information Architecture,
Strategic Consulting,Maintenance and Support"></span><span class="blinking-cursor">|</span>
</div>
<div class="addsp_320x50_action">
<button>DOWNLOAD</button></div>
</div>
Mathematically speaking, sinking means adjusting frequency and phase. I'll demonstrate each separately. Note that what I'm gonna explain is the concept and you can implement it in your codes using Javascript, css, etc
Frequency
You can't sink two animations unless the longer duration is a factor
of shorter duration.
For example in your codes, blinking has a duration of 1s. So your image scaling duration and Also the whole duration must be a selection of either 1s, 2s, 3s, ... or 1/2s, 1/3s, ...
For better understanding let me make a simple example. Assume two images want to be animated.
<img src="1.png" id="img1">
<img src="1.png" style="margin-left: 50px;" id="img2">
Consider two different animations for each one
#keyframes k1
{
25%
{
transform: rotate(-4deg);
}
50%
{
transform: rotate(0deg);
}
75%
{
transform: rotate(3deg);
}
100%
{
transform: rotate(0deg);
}
}
#keyframes k2
{
50%
{
transform: scale(1.2);
}
100%
{
transform: scale(1);
}
}
So since k2 is simpler, I'll first assign it to img2 with duration of 0.7s
#img2
{
animation: k2 0.7s linear infinite;
}
And based on what was explained, I will assign animation k1 to img1 with a duration of 1.4s. (NOT 1.3s NOT 1.5s VERY IMPORTANT!)
#img1
{
animation: k1 1.4s linear infinite;
}
If you run this code you'll see they are sink! To feel the concept better, change the duration of k1 to 0.9s. Now it feels like they are doing their thing separately!
Note
I set k1 to 1.4s (0.7s × 2) because k1 seems to be a combination of one go forward and come back and using 2x feels they are dancing together with the same harmony!
Phase
In css, phase is showed by animation-delay. Modifying frequencies (duration) is enough to sink two animations but if two animation begin at the same time it will feel better! So to illustrate set a delay for img1 of 0.2s. They are still sink but it doesn't feel nice! Now change the delay to 0.7s. Now it's beautiful again! (Maybe even more beautiful)
Back to your code
Your images scale with duration of 1.2s (40% of 3s) and your text blinking duration is 1s and as you can see they are not factor of each other so you can't sink!
I think you might be looking for the animation iteration event and the animation start event.
Instead of just using the myLoop function to call itself, try using these listeners to call it instead.
The end of your js file would look like:
var i = 0;
function myLoop() {
var dataType = document.getElementById("typewriter").dataset.typewriter,
w = dataType.split(",");
if (i < w.length -1 ) {
typewriter(w[i]);
}
i++;
}
var imageElems = Array.from(document.querySelectorAll('.addsp_320x50_img'));
imageElems.forEach(elem=>{
elem.addEventListener('animationstart',myLoop);
});
Where ".addsp_320x50_img" is just whatever common selector you give to all the images.
If you control the animation with the same JavaScript loop as the typewriter script, it won't lose sync. I rewrote the typewriter script to do this in the snippet below.
startTypewriter() Exaplaination
First, all the messages from the are collected converted into an array.
typewriter.getAttribute('data-typewriter').split(',');
Then the CSS icon animation is started. Because JavaScript intervals wait for their duration before executing their code, so the first message is typed by calling type() before the interval is created.
icon.classList.add('icon-animation');
type(typewriter, messages[0].trim(), animationDuration - pauseDuration);
The interval is now started, running every 3 seconds by default. The first thing that happens is the animation is reset in case it got out of sync somehow.
icon.classList.remove('icon-animation');
window.setTimeout(function() {
icon.classList.add('icon-animation');
}, 25);
Next, the message is typed by calling type(). Before it ends, a check is run so see if it's on the last array element. If so, it will start over.
if (i == messages.length) i = 0;
type() Exaplaination
At the start, the timePerCharacter value is calculated. The message is split to an array and the typewriter output is cleared
var timePerCharacter = duration / message.length;
var message = message.split('');
typewriter.innerHTML = '';
A loop is created, running every timePerCharacter. The character is outputted to the typewriter output.
typewriter.innerHTML += message[i];
Once all the characters are outputted, the loop is cleared
if (i == message.length) clearInterval(typeLoop);
Snippent
var animationDuration = 3000;
var pauseDuration = 2000;
startTypewriter();
function startTypewriter() {
var typewriter = document.getElementById('typewriter');
var icon = document.getElementById('icon');
var messages = typewriter.getAttribute('data-typewriter').split(',');
icon.classList.add('icon-animation');
type(typewriter, messages[0].trim(), animationDuration - pauseDuration);
var i = 1;
window.setInterval(function() {
icon.classList.remove('icon-animation');
window.setTimeout(function() {
icon.classList.add('icon-animation');
}, 25);
type(typewriter, messages[i].trim(), animationDuration - pauseDuration);
i++;
if (i == messages.length) i = 0;
}, animationDuration);
}
function type(typewriter, message, duration) {
var timePerCharacter = duration / message.length;
var message = message.split('');
typewriter.innerHTML = '';
var i = 0;
var typeLoop = window.setInterval(function() {
typewriter.innerHTML += message[i];
i++;
if (i == message.length) clearInterval(typeLoop);
}, timePerCharacter);
}
#keyframes icon {
20% {
transform: scale(0.9);
}
40% {
transform: scale(1);
}
60% {
transform: scale(0.9);
}
80% {
transform: scale(1);
}
100% {
transform: translateY(-200%);
}
}
.icon {
border-radius: 100%;
}
.icon-animation {
animation: icon 3s;
}
#keyframes cursor {
50% {
color: transparent;
}
}
.blinking-cursor {
animation: cursor 1s steps(1) infinite;
}
<img id="icon" src="https://de7yjjf51n4cm.cloudfront.net/banners/amazonprime_newicon.jpg" class="icon">
<span id="typewriter" data-typewriter="
Web Strategy,
UX Testing,
Content Management System,
Web Design,
Research and Analytics,
Information Architecture,
Strategic Consulting,
Maintenance and Support
">
</span>
<span class="blinking-cursor">|</span>

Sliding and fading a div element

I am trying to animate a div element (slide and fade) with a button click. At first, the element is not visible to a user. When the button is clicked, it will slide to right and fade in. Once the button is clicked again, it will slide to left and fade out. I come up with two solutions, with css and with JQuery.
In the first one, I used JQuery. You can find the example in this JSFiddle 1.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 1;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.stop(true, true).animate({
left: "toggle",
opacity: "toggle"
}, 1000);
});
Here, everything seems working but it does directly opposite of what I want. It first fades out, and with the second click, it fades in. It is because that the opacity of the element is 1, but if I turn it to 0, nothing happens.
Secondly, I tried to do that with css animation by using key-frames (changing opacity from 0 to 1) but it has also problem. It starts the animation exactly the way I want. However, when I click the button again, it disappears immediately. Here is the JSFiddle 2.
HTML
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
CSS
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: 0;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.move-my-modal {
-moz-transform: translate(250px, 0px);
-webkit-transform: translate(250px, 0px);
-ms-transform: translate(250px, 0px);
-o-transform: translate(250px, 0px);
}
.animate-opacity {
-webkit-animation: toggle-opacity 1s ease;
-moz-animation: toggle-opacity 1s ease;
-o-animation: toggle-opacity 1s ease;
animation: toggle-opacity 1s ease;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes toggle-opacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JQuery
$("#my-button").click(function () {
var $modal = $("#my-modal");
$modal.toggleClass("move-my-modal");
$modal.toggleClass("animate-opacity");
});
To this end, I have these questions;
1) What are the problems with these two approaches? Is there something that I missed or forgot to use? How can I correct them to meet the requirements that I mentioned at the beginning.
2) Which one is the better way to make this action? Is there any cons or pros of these approaches?
3) Is there any other way to make this action? I am new on this area and I might not notice a simpler way.
You can toggle an .active class to the element and use CSS transitions.
This way, if the browser is old enough to not support animations, it will still work but it won't slow down computers that do not handle animations well.
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal.active {
opacity: 1;
left: 0;
}
$("#my-button").click(function () {
$("#my-modal").toggleClass('active');
});
#my-modal {
opacity: 0;
position: fixed;
top: 50px;
left: -250px;
width: 250px;
height: 100%;
background-color: red;
transition: all 1s linear;
}
#my-modal.active {
opacity: 1;
left: 0;
}
<button id="my-button">Click me!</button>
<div id="my-modal"></div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Page elements flying in

My purpose is to modify my page to load elements by "flying in". I found this JSFiddle example, and I should now make it to happen on page load, without clicking anything. So it triggers on page load.
$(function() {
$("#add-sidebar-module").on("click", function() {
$("<div />", {
'class': "module",
text: "I'm new here."
}).prependTo("#sidebar");
});
$("#add-article").on("click", function() {
$("<div />", {
'class': "module",
html: "<h1>Title</h1><p>text text text.</p>"
}).prependTo("#main");
});
});
I'm also afraid that there is some kind of issues in what comes to the page loading and the animation. Tips and tricks to make sure it's as smooth as possible would be welcome!
http://jsfiddle.net/PJN6r/
<div class="animate-on-load">
This is animated
</div>
$('.animate-on-load').addClass('module');
As per your request.
I would not suggest triggering a click on page load. Just add the class on load.
This is more smooth effect: enter link description here
.module {
-webkit-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-moz-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-o-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
-ms-animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
animation: flyin 1s cubic-bezier(.62, -0.36, .4, 1.28);
}
#-webkit-keyframes flyin {
from {
opacity: 0;
-webkit-transform: scale(1.4);
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
#-moz-keyframes flyin {
from {
opacity: 0;
-moz-transform: scale(1.4);
}
to {
-moz-transform: scale(1);
opacity: 1;
}
}
#-o-keyframes flyin {
from {
opacity: 0;
-o-transform: scale(1.4);
}
to {
-o-transform: scale(1);
opacity: 1;
}
}
#-ms-keyframes flyin {
from {
opacity: 0;
-ms-transform: scale(1.4);
}
to {
-ms-transform: scale(1);
opacity: 1;
}
}
#keyframes flyin {
from {
opacity: 0;
transform: scale(1.4);
}
to {
transform: scale(1);
opacity: 1;
}
}
body {
padding: 50px;
}
.main, .sidebar {
padding: 1em;
}
.main {
float: left;
width: 60%;
}
.sidebar {
float: right;
width: 20%;
}
.module {
border: 0.5em solid #ccc;
background: #eee;
padding: 1.5em;
margin: 0 0 2em 0;
}
h1 {
margin-top: 0;
}
Check out this jQuery plugin. It animates any element you want when the page loads, so that you don't have to click anything.
Here is a demo of it.
To use this plugin, make sure you first include jQuery on any pages that use it, and include the JavaScript file as well.
Then wrap this tag around all elements you want to fly-in.
<div class="runway">
... fly-in elements go here ...
</div
Finally add either fly-in-right or fly-in-left class to the DOM element you wish to animate.
<img class="fly-in-left" src="..." />
And that should do it! When the element if visible on the page, it will animate a 'fly-in'!

Categories

Resources