I want to use an Angular function to activate a Css animation. I have searched for ways to do this but Im really confused on how to do it in my case. I wish to have the div "slide1" to slide horizontally to the right when one of the buttons "B1" OR "B2" is clicked.
This is my Angular function:
directive('click2', () => {
return{
restrict: 'A',
link: (scope) => {
scope.clicked = () => {
}
}
}
})
My slide div css is:
.slide1 {
bottom: -500px;
width: 30%;
//min-width: 275px;
height: 50%;
min-height: 390px;
box-sizing: border-box;
position: relative;
content: '';
background: #a2e0f7;
animation:nudge 5s linear alternate;
}
#keyframes nudge {
0%{
right: 500px;
};
100% {
transform: translate(500px);
}
50% {
transform: translate(0,0);
}
}
Any help with how I can get the Slide1 div to move on click with my Angular function?
An easy way to do this is to add the class to the div dynamically.
And one way to do that would be something like:
<div ng-controller="MyCtrl">
<button ng-click="doSlide = !doSlide">A</button>
<button ng-click="doSlide = !doSlide">B</button>
<div ng-class="{'slide1': doSlide}">Click a button to move me</div>
</div>
Clicking either button will toggle the doSlide value. When doSlide is true the slide1 class is added to the div.
Note: it is not necessary to define doSlide in the controller, Angular will automatically add it to the scope.
Related
I have a popup in my app:
<div id="modal"></div>
let modal = document.getElementById('modal')
modal.innerHTML = `
<button class="close-button" onclick="close_modal()">Close</button>
`
#modal{
width: 30em;
height: 24em;
overflow: hidden;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: hidden;
}
When I click certain button function is triggered which has modal.classList.add('open-modal') in it.
.open-modal{
visibility: visible !important;
}
close_modal function is:
function close_modal(){
modal.classList.add('close-modal')
}
CSS:
.close-modal{
visibility: hidden !important;
}
It works just fine once(i can open and close popup but when I try to open it second time it doesn't. Why is this happening and how to fix it?
After adding a new class, you must remove the previous class from the element's classlist. So the modal won't seem to work anymore after having both classes at the same time.
for ex.
function changeVisibility(modal) {
if(modal.classList.contains('open-modal')) {
modal.classList.remove('open-modal');
modal.classlist.add('close-modal');
} else {
modal.classList.remove('close-modal');
modal.classList.add('open-modal')
}
}
If your trying to do modals, you should use HTML's <dialog> element (Also see HTMLDialogElement). MDN has a tutorial on it.
I made a button that when I pressed it, it will add a class with animation into the image. I made another button and I want to add another class to the image which will revert the image back to its original size. But the second class is not adding into it, I've tried to remove the previous class but it's unremovable after adding into image.
Any way to add the second class into the image?
$(document).ready(function() {
$('#profile').click(function() {
$('.imageone').addClass('move');
$('.imageone').removeClass('imageone');
})
$('#back').click(function() {
$('.imageone').removeClass('move');
$('.imageone').addClass('goback');
})
})
.move {
animation: scale 1s ease-in-out forwards;
z-index: -1;
}
#keyframes scale {
from {
position: relative;
z-index: -1;
bottom: 0pt;
}
to {
position: relative;
bottom: -142pt;
transform: scale(1.16, 1.23);
left: 0pt;
z-index: -1;
transform-origin: bottom right;
}
}
.goback {
animation: goback 1s ease-in-out forwards;
z-index: -1;
}
#keyframes goback {
from {
position: relative;
bottom: -142pt;
transform: scale(1.16, 1.23);
left: 0pt;
z-index: -1;
transform-origin: bottom right;
}
to {
position: relative;
z-index: -1;
bottom: 0pt;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pageone">
<img src="images.png" class="imageone" alt="liam">
</div>
<div id="textprofile">
<a href="#" class="button" id="border">
<p id="profile">Visit Profile</p>
</a>
</div>
<p id="back">go back</p>
You have two elements with same id so when you add an event listener using ID selector, javascript cannot handle such a thing because you are supposed to have each ID only once in HTML pages. Try to change your selector and also change IDs.
First you need to remove the existing class and add a new class to it. You have added a class first with the existing one so it will get appended and after you are trying to remove that class "imageone" which will not get removed. So try removing imageone first and add the move class. Provide an Id to an img element and do something like this.
$(document).ready(function() {
$('#profile').click(function() {
$('#imageone').removeClass('imageone');
$('#imageone').addClass('move');
})
$('#back').click(function() {
$('#imageone').removeClass('move');
$('#imageone').addClass('goback');
})
})
plz try this code..
$(document).ready(function() {
$('#profile').click(function() {
$('.imageone').addClass('move');
$('.imageone').removeClass('goback');
});
$('#back').click(function() {
$('.imageone').removeClass('move');
$('.imageone').addClass('goback');
});
});
trying to make a button like this: https://gyazo.com/9afbd559c15bb707a2d1b24ac790cf7a. The problem with the code right now is that it works as it is supposed to on the first time; but after that, instead of going from left to right as intented, it goes from right to left to right.
HTML
<div class="btn-slide block relative mx-auto" style="overflow: hidden; width: 12rem;">
<span class="z-10">View Pricing</span>
<span class="slide-bg block absolute transition" style="background-color: rgba(0,0,0,.1); z-index: -1; top: 0; left:-10rem; width: 10rem; height: 3rem;"></span>
</div>
Javascript
const btns = document.querySelectorAll(".btn-slide");
const slide = document.getElementsByClassName('slide-bg');
btns.forEach(function(btn) {
btn.addEventListener('mouseout', function () {
slide[0].style.transform = 'translateX(230%)';
slide[0].style.transform = 'none';
})
btn.addEventListener('mouseover', function() {
slide[0].style.transform = 'translateX(80%)';
}, true)
})
Unless you have to compute a value in JavaScript (like the height of an element).
Use CSS classes as modifiers (is-hidden, is-folded, is-collapsed, ...).
Using JavaScript, only add/remove/toggle the class
yourElement.addEventListener(
"mouseenter",
function (event)
{
yourElement.classList.remove("is-collapsed");
}
);
yourElement.addEventListener(
"mouseleave",
function (event)
{
yourElement.classList.add("is-collapsed");
}
);
is-collapsed is only an exemple, name it according to your class naming standard.
You're probably going to need a bit more code than what you're showing, as you have two mutually exclusive CSS things you want to do: transition that background across the "button" on mouseenter/mouseout, which is animated, and then reset the background to its start position, which should absolutely not be animated. So you need to not just toggle the background, you also need to toggle whether or not to animation those changes.
function setupAnimation(container) {
const fg = container.querySelector('.label');
const bg = container.querySelector('.slide-bg');
const stop = evt => evt.stopPropagation();
// step one: make label text inert. This is critical.
fg.addEventListener('mouseenter', stop);
fg.addEventListener('mouseout', stop);
// mouse enter: start the slide in animation
container.addEventListener('mouseenter', evt => {
bg.classList.add('animate');
bg.classList.add('slide-in');
});
// mouse out: start the slide-out animation
container.addEventListener('mouseout', evt => {
bg.classList.remove('slide-in');
bg.classList.add('slide-out');
});
// when the slide-out transition is done,
// reset the CSS with animations _turned off_
bg.addEventListener('transitionend', evt => {
if (bg.classList.contains('slide-out')) {
bg.classList.remove('animate');
bg.classList.remove('slide-out');
}
});
}
setupAnimation(document.querySelector('.slide'));
.slide {
position: relative;
overflow: hidden;
width: 12rem;
height: 1.25rem;
cursor: pointer;
border: 1px solid black;
text-align: center;
}
.slide span {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.slide-bg {
background-color: rgba(0,0,0,.1);
transform: translate(-100%, 0);
transition: none;
z-index: 0;
}
.slide-bg.animate {
transition: transform 0.5s ease-in-out;
}
.slide-bg.slide-in {
transform: translate(0%, 0);
}
.slide-bg.slide-out {
transform: translate(100%, 0);
}
<div class="slide">
<span class="label">View Pricing</span>
<span class="slide-bg"></span>
</div>
And thanks to browsers being finicky with rapid succession mouseenter/mouseout events, depending on how fast you move the cursor this may not even be enough: you might very well still need a "step" tracker so that your JS knows which part of your total animation is currently active, and not trigger the mouseout code if, by the time the slide-in transition ends, the cursor is in fact (still) over the top container (or, again).
I advice you use the .on event listener
$('').on("mouseentre","elem",function(){$('').toggleclass('.classname')})
$('').on("mouseleave","elem",function(){$('').toggleclass('.classname')})
Then you can toggle css classes to your element in the function
toggle class adds the css of a class to your jquery selection, you can do it multiple times and have keyframes for animation in the css class
Keyframes are great way to implement animation and are supported on every browers
I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)
Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.
You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>
$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/
Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>
This is my piece of HTML code
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
I make a Ajax request and get a json response for every click by the user and i append the q_div and a_div using the jquery function
$('.q_div').append(data.question);
$('.a_div').append(data.answer);
I have css keyframe animation on both q_div and a_div to come from right to left of the screen. But the animation works only on the first load of the page and not on the 'append' function for the json response. I am new to css and animations. help me out for the responsive animations
animation in css3 code:
.q_div {
animation: q_ani 2s;
}
#keyframes q_ani {
from{margin-left: 50px;}
to{margin-left: default;}
}
a possible solution using css animation
$(function() {
var cssAnimationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
$('.click').click(function() {
$('.q_div, .a_div').addClass("animate").one(cssAnimationEnd , function() {
$('.q_div, .a_div').removeClass("animate");
});
});
})
.q_div.animate {
animation: q_ani 2s;
}
.a_div.animate {
animation: q_ani 2s;
}
#keyframes q_ani {
from {
margin-left: 150%;
}
to {
margin-left: default;
}
}
/*for test purpose*/
.q_div,
.a_div {
position: relative;
height: 20px;
width: 500px;
background: #ddd;
margin-top: 10px;
}
.qna_div {
padding: 20px;
width: 500px;
background: #333;
}
body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">go</button>
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
You should delete and add .q_div class each time you need animation appear
You could use jquery to animate your divs. Put this code in the success ajax callback:
// First put your divs to the right
$('.q_div, .a_div').css('right','0');
// Do the animation
$('.q_div, .a_div').animate({
left: 0,
}, 1000);
https://jsfiddle.net/a8cq9yj1/1/
I hope it can help you,i just simple using the classList function and some SASS style rule
http://jsbin.com/vosuvam/2/edit?js,output