I have a share image on click of which a Div appears which contains facebook and twitter sharing options but i want this Div to appear with some fading animation.
Here is my HTML code:-
<img class="like_2" alt="image" (click) = "shareIt(i)" src="assets/img/Fwd Icons/share.png">
<div class="row" *ngIf="sharing==i">
<section class="widget">
<share-buttons (click) = "closeShareIt(i)" [url]=" myFeed.contentUrl "
[count]="false"
[totalCount]="true"
[defaultStyle]= "true"
(popUpClosed) = "true"
[google]="googleInner"
[pinterest]="false"
[linkedIn]="false"
[tumblr]="tumblrInner"
[reddit]="false"
[stumbleUpOn]="false">
</share-buttons>
</section>
</div>
You can look at the Angular2 animate docs.
https://angular.io/docs/ts/latest/guide/animations.html
However, if you are looking for something really easy to do then just use something like this ..
<div [ngClass]="{'animator': gogogo}" class="myel">i will animate</div>
then in your component class ..
gogogo=false;
ngOnInit() {
setTimeout(() => {
this.gogogo=true;
}, 1000);
}
then in your css ..
.myel {
opacity:0;
}
.myel.animator {
opacity:1;
transition:opacity 2s ease-in;
}
Related
I am making a web app for texting. There's an input box for text and when a text is sent, a new <div> tag is created under an existing <div> tag. The code looks like this:
function send() {
const chatbox = document.querySelector(".chatbox");
var input = document.getElementById("text").value;
if (!input) return;
const newtext = document.createElement("div");
newtext.classList.add("mytexts");
newtext.innerHTML = input;
chatbox.appendChild(newtext);
}
<div class="chatbox"> </div>
<div class="inputs">
<input type="text" id="text" placeholder="Type...">
<button id="send" onclick="send()">Send</button>
</div>
Every time there's a new text, a new <div class="mytexts"> is created inside the <div class="chatbox">. Is there a way to add some cool transition effect when a new <div> is created so that it looks good when a new text is sent?
You can insert the new div and give it an animation that scales it from 0 to 1
function send() {
const chatbox = document.querySelector(".chatbox");
var input = document.getElementById("text").value;
if (!input) return;
const newtext = document.createElement("div");
newtext.classList.add("mytexts");
newtext.innerHTML = input;
chatbox.appendChild(newtext);
}
#keyframes scale-up {
0% {transform: scale(0)}
100% {transform: scale(1)}
}
.mytexts {
transform: scale(1);
animation: scale-up 1s ease;
}
<div class="chatbox"> </div>
<div class="inputs">
<input type="text" id="text" placeholder="Type...">
<button id="send" onclick="send()">Send</button>
</div>
You could use gsap for animations:
https://greensock.com/gsap/
I don't know what kind of effect you're looking for but just adding a line of gsap animation after appending the child should do the trick:
gsap.from(newText, {x: -100, opacity: 0, duration: 0.5, ease: 'back'})
where the first parameter specifies the object to be animated and the second one the css properties it will animate from.
I want to add an overlay that slides into view on my page. To do it, I am setting the style.width of the div during overlay open and close. The problem is the div is controlled by a *ngIf, and is undefined when my .ts code sets the *ngIf true and tries to set the div's width.
How can I get this working?
Component HTML:
<div *ngIf="showOverlay === true">
<div id="myOverlay" class="overlay" style="margin-top: 25px;">
×
<div class="overlay-content">
Overlay is working!
</div>
</div>
</div>
<div *ngIf="showOverlay === false" id="content" style="padding: 30px;">
...
</div>
Component TS:
public showOverlayFcn() {
this.showOverlay = true;
this.openOverlay();
}
public openOverlay() {
document.getElementById("myOverlay").style.width = "100%";
}
public closeOverlay() {
document.getElementById("myOverlay").style.width = "0%";
}
Thanks! Bob
You could try using a conditional ngStyle attribute on the div with ID of myOverlay:
[ngStyle]="{'width': showOverlay ? '100%' : '0%'}"
Looks like you're not following the angular way. To get any element angular recommends to use #ViewChild. SO the proper way would be something like below:
<div *ngIf="showOverlay === true">
<div #myOverlay class="overlay" style="margin-top: 25px;">
×
<div class="overlay-content">
Overlay is working!
</div>
</div>
</div>
<div *ngIf="showOverlay === false" id="content" style="padding: 30px;">
...
</div>
And on your class file access it like this:
#ViewChild('myOverlay', { static: false }) myOverlay: ElementRef;
Even after this if you're not able to get the element then trigger a change detection like: this.changeDetectorRef.detectChanges();. Please remember to inject the ChangeDetectorRef in your constructor.
Try to use setTimeout function as there maybe delay to enable element by ngIf.
public openOverlay() {
setTimeout(function() {
document.getElementById("myOverlay").style.width = "100%";
}, 100);
}
I'm trying to do my own notification compoment in my sample Angular application.
I have the following template:
<aside *ngFor="let message of messages ">
<div class="notification" style="position:fixed">
{{message.content}}
</div>
</aside>
I push new messages through service to the component, so when new message comes it is immidiately showed in above loop.
I would like to make every message visible for 3 seconds.
I need to add a class with fade out transition which is set to 3 seconds.
Use a keyframes structure.
#keyframes fadeout {
from {opacity:1;}
to {opacity:0;}
}
.notification {
animation: fadeout 3s
}
I have a set of multiple circles of different opacity, each circle should be clickable and when clicked, should come into focus and the clicked on will come in front of the others.
simple you will say...
My question is what to use CSS or Jquery and how to achieve it
Example:
.circles{}
.round{opacity: 0.4;;width:75px;height:75px;border-radius: 50%; position: relative;}
.circle1{background:#0f4977;top: 35px;left: 200px;z-index: 1;}
.circle2{background:#f41875;top: 0px;left: 250px;z-index: 2;}
.circle3{background:#6b259c;top: -50px;left: 205px;z-index: 3;}`
$(".round").click(function() { //on click of any circle
$(this).css("z-index", "99");
$(this).css("opacity", "1");
$(this).siblings().css("opacity", "0.5");
$(this).siblings().css("z-index", "5");
});
<div clas="circles">
<div class="round circle1"></div>
<div class="round circle2"></div>
<div class="round circle3"></div>
</div>
Fiddle: https://jsfiddle.net/cLqqfh4v/8/
How about something like...
$(".round").click(function() { //on click of any circle
$(this).css("z-index", "99"); //set this circle's z-index to 99, i.e. bringing it to the front
$(this).css("opacity", "1"); //Set its opacity to 1 (opaque)
//Reset all other circles:
$(this).siblings().css("opacity", "0.5");
$(this).siblings().css("z-index", "5");
});
When your HTML is:
<div class="round" id="circle1></div>
<div class="round" id="circle2></div>
<div class="round" id="circle3></div>
Or something similar; your circles just have to have the class circle
See JSFiddle: https://jsfiddle.net/jofish999/somad48j/1/
Edit
As mentioned by #Sai, a more efficient solution would be to have a CSS rule for the class .opaque. Then, instead of using jQuery to change the circle's CSS, you use addClass() to give it that class, then removeClass() to remove it again.
$(".round").click(function () { //on click of any circle
$(this).addClass("opaque");
$(this).siblings().removeClass("opaque");
Where your CSS is:
.opaque {opacity:1; z-index:99;}
I want to hover on an element (an imagemap area, actually but I made it a simple div for this example) and create an animation on a different div element. Since they're not child or sibilings I had to use java and addclass but it's not working. It looks like the trigger element is not recognized and if I hover it nothing happens
<div class="testHover">
<p>Hover me to change color</p>
</div>
<div id="timeLine">
<div id="primaGuerraMondiale">
<h2>Content</h2>
</div>
</div>
css
#primaGuerraMondiale {
background: green;
}
.animated {
color:white;
}
javascript
$('.testHover').hover(function() {
$('#primaGuerraMondiale').addClass('animated');
}, function() {
$('#primaGuerraMondiale').removeClass('animated');
});
Here is the fiddle https://jsfiddle.net/elisapessa/yzLe803n/
You need jQuery 1.9.1 and above to make it work. The code is right.
In the left hand panel in the jsfiddle, there is a section called "Add Resources". Click this, then add the URL into the field and click the + button. This will add your resource (JS or CSS) to the page. After that you click on run and check it: