http://plnkr.co/edit/cPyi8lukckyo9EFReI9V?p=preview
The delete fade away but not when I click on the checkbox, any idea where I've gone wrong?
<li class="task" ng-repeat="task in tasks" ng-hide="task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
css
.task.ng-enter,
.task.ng-move {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:0;
}
.task.ng-enter.ng-enter-active,
.task.ng-move.ng-move-active {
opacity:1;
}
.task.ng-leave {
-webkit-transition:0.25s linear all;
transition:0.25s linear all;
opacity:1;
}
.task.ng-leave.ng-leave-active {
opacity:0;
}
you need to include the ng-hide class in your animations
take a look at this, this is in case you want just to hide the tasks and not delete them
http://plnkr.co/edit/xrKfNqaTxNL6xw1NBAkO?p=preview
i forked your example into this
using ng-hide ng-hide-add
This is happening because you are only hiding it, not removing it.
You will need to use ng-if in this case:
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-if="!task.done">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>
Here's your demo
EDIT OP was looking for checkbox to apply a strike through, pause, then fade out.
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-hide="task.done" ng-class="(task.done)?'strike':''">
<input type="checkbox" ng-model="task.done">
{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>
Added following CSS:
.task.ng-hide {
-webkit-transition: 0.25s linear all;
transition: 0.25s linear all;
opacity: 0;
}
.task.ng-hide-add {
-webkit-transition-delay: 2s;
transition-delay: 2s;
display: block !important;
}
.strike {
text-decoration: line-through;
}
Demo v2
Toggling checkbox just make item hidden. But del() function remove item from scope.
Remove that ng-hide="task.done" from <li> and use ng-if="!task.done"
Check this out
Working Demo
<body ng-controller="MainCtrl">
<li class="task" ng-repeat="task in tasks" ng-if="!task.done">
<input type="checkbox" ng-model="task.done">{{task.name}}
<button ng-click="del($index)">del</button>
</li>
</body>
Related
I have set up a very basic plunkr to animate list element between two views with ng-animate 1.5 - ng-animate-ref.
It works for Firefox and Chrome but unfortunately it doesn't for iOS.
http://plnkr.co/edit/UDX9XlIi3hpYcmJZQ5WD
CSS
.row.ng-leave {
transition: 0.2s linear all;
}
.row.ng-anchor-in-add {
transition: 0.5s linear all;
}
HTML
<div class="animated row" ng-repeat="i in a track by i" ng-animate-ref="item-{{i}}">{{i}}</div>
<br>
<div class="animated row" ng-repeat="i in b track by i" ng-animate-ref="item-{{i}}">{{i}}</div>
Start
RESULT
I want to animate the showing and hiding of an element using animate.css and angular.
I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.
I have tried the following setup on plunker, but it doesn't work.
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
style.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.
I can make it work if I add this to the css:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..
plunker to show what I am seeing.
What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?
You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.
According to that you can edit your code like this:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
EDIT:
In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.
So you have to use the following CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
IMPORTANT NOTE:
In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
Working Plunker with full code
Change your code to this
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show{
transition: all linear 0.5s;
opacity:1;
}
I have two paragraphs (lets say with id "p1" and "p2")
I would like to transition from one to another when a link is clicked, and vice versa when a different link is clicked. They are located on the same page but only one is displayed at a time (using javascript to hide one then display the other when the link is clicked).
Both paragraphs have "hidden page" as their classes.
Would the css resemble something like this?
.hidden {
opacity: 0;
display: none;
transition: opacity 1s linear;
}
.page {
transition: opacity 1s linear;
opacity: 1;
}
I know it's not that but would it be something similar?
EDIT:
Link to the gist of the css, js, and html files
https://gist.github.com/EricHanLiu/a4b09862f2d25b6c6e5f
edited out some things like name phone# email etc, but the main focus of is on the two paragraphs in the middle
If you are trying to fade in one paragraph when clicking on a link and faded the other one out if it is visible then you can do something like the following:
Live Preview
HTML:
<a id="first" href="#p1">1</a> <a id="second" href="#p2">2</a>
<div class="fadeIn">
<p id="p1" class="hidden">I am the first paragraph.</p>
</div>
<div class="fadeIn">
<p id="p2" class="hidden">I am the second paragraph.</p>
</div>
CSS:
.hidden {
opacity: 0;
}
/*fade in transition css below*/
.fadeIn p {
-webkit-transition: opacity 2.0s ease-in;
-moz-transition: opacity 2.0s ease-in;
-o-transition: opacity 2.0s ease-in;
}
.fadeIn p.clicked {
opacity: 1;
}
JavaScript:
//helper function to select the element by id
function $(id){
return document.getElementById(id);
}
//on click event for first
$("first").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.add("clicked");
$("p2").classList.remove("clicked")
});
//on click event for second
$("second").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.remove("clicked");
$("p2").classList.add("clicked");
});
As you said, you need two links to trigger the two paragraphs, respectively.
Here's my simple solution to your problem. I am not that sure that this is what you are looking for. But hopefully this helps!
<div>
<p class="show" id="p1">Paragraph 1</p>
<p class="hidden" id="p2">Paragraph 2</p>
Show Paragraph 1
Show Paragraph 2
</div>
<script type="text/javascript">
var sb1 = document.getElementById('sb1');
var sb2 = document.getElementById('sb2');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
sb1.addEventListener('click', function() {
p1.classList.remove('hidden');
p1.classList.add('show');
p2.classList.remove('show');
p2.classList.add('hidden');
});
sb2.addEventListener('click', function() {
p1.classList.remove('show');
p1.classList.add('hidden');
p2.classList.remove('hidden');
p2.classList.add('show');
});
</script>
In the script above, I just switched the respective classes on the two paragraphs.
There a lot of solution to this, you can use jQuery to simplify this solution.
I have created tab style interface using css and javascript with only two tabs which is working fine.But i want to add more tabs to it and i am not getting how can i write javascript code for it to show current active tab and its contents and hide all other tabs and their contents
Following is my html code :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
This is my javascript code :
$(document).ready(function()
{
$(".tab").click(function()
{
var X=$(this).attr('id');
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
});
});
This is working fine for two tabs but if i add more tabs to it say :
<div id="container">
<div id="tabbox">
Signup
<a href="#" id="login" class="tab select">Login</a>
Basicinfo
contactinfo
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
<div id="basicbox">Basic information</div>
<div id="contactbox">Contact information</div>
</div>
</div>
Then if i use previous javascript function i will have to add lot more lines to it and i am not getting how can i do it in short and simple way.
What changes do i have to make in my javascript function..
I'd suggest the following:
$(".tab").click(function()
{
var x = this.id, // equivalent to $(this).attr('id'), but slightly faster/more-simple
show = $('#' + x + 'box');
if (show.length){
$('.contentBox').slideUp(500);
show.slideDown(500);
}
});
JS Fiddle demo.
Or the following (equivalent to the above, but using a callback):
$(".tab").click(function()
{
var x = this.id,
show = $('#' + x + 'box');
if (show.length){
$('.contentBox')
.slideUp(500,
function(){
show.slideDown(500);
});
}
});
JS Fiddle demo.
This assumes the following:
That all of the 'boxes' you want to show have the class of contentBox,
That the id of the 'box' you want to show takes the form of the id of the link that's clicked followed by the word 'box', so clicking the #signup link reveals #signupbox.
Edited to include a CSS-only option:
With the following HTML:
<div id="container">
<div id="tabbox">
Signup <!-- note the href -->
Login
</div>
<div id="panel">
<div id="loginbox" class="contentBox">Login Form</div>
<div id="signupbox" class="contentBox">Signup Form</div>
</div>
</div>
And the CSS:
.contentBox {
height: 0;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
overflow: hidden;
}
.contentBox:target {
height: 2em;
-webkit-transition: height 1s linear;
-moz-transition: height 1s linear;
-o-transition: height 1s linear;
-ms-transition: height 1s linear;
transition: height 1s linear;
}
JS Fiddle demo.
You are mixing ids (that have to be unique - you are using them multiple times) and classes in a weird way (you did before your edit...).
For a basic setup like:
<div id="container">
<div id="tabbox">
A <!-- note the URL fragments pointing to actual ids -->
B
C
D
</div>
<div id="panel">
<div id="A" class="tab">A Content</div> <!-- ID attributes are only used once -->
<div id="B" class="tab">B Content</div>
<div id="C" class="tab">C Content</div>
<div id="D" class="tab">D Content</div>
</div>
</div>
You could just use some lines of jQuery to get things working:
$('div.tab').hide().first().slideDown(); //show first
$('a.tab').click(function(){
var targetID = $(this).attr('href'); //store element that triggered the click event
$('div.tab:visible').slideUp(function(){ //hide visible tab
$(targetID).slideDown(); //slide down newly selected tab
});
});
See a working fiddle
Also read about ids and classes at MDN
Not tested but maybe works:
Javascript:
$(document).ready(function(event) {
$("#tabbox a:not(.selected)").click(function() {
$($("#tabbox a.selected").attr('href')).slideUp();
$("#tabbox a.selected").removeClass('select');
$(this).addClass('select');
$($(this).attr('href')).slideDown();
event.stopPropagation();
});
});
HTML:
<div id="container">
<div id="tabbox">
Signup
Login
</div>
<div id="panel">
<div id="loginbox">Login Form</div>
<div id="signupbox">Signup Form</div>
</div>
</div>
if you give a class to the content divs before you open one tab you can close all the others e.g.
$(".tab-content").slideUp();
$("#loginbox").slideDown();
You also need to know which tab you have clicked on e.g.
$(".tab").click(function(){
var id = this.id;
var current_tab_content = '#'+id+'box';
$(".tab-content").slideUp();
$(current_tab_content).slideDown();
});
I have not tested this but hopefully you get the idea.
I have this very simple code for highlighting a specific list item:
var $highlights = $j("div.ab-highlights ul li a");
$highlights.hover(
function () {
$j(this).children().addClass('active');
$j(this).parent().animate({opacity: 1}, 200);
$highlights.not(this).parent().animate({opacity: 0.2}, 200);
},
function () {
$j(this).children().removeClass('active');
}
);
the BIG problem is that it does not work in chrome (in firefox 4 & IE9 it works great)
the site is http://www.alonbt.com
the HTML is
<div class="ab-highlights">
<ul>
<li class="mansfred"><span>Musical Biography</span></li>
<li class="museek"><span>Music Visulisation Project</span></li>
<li class="ripui-sini"><span>Chinese Medicine Website</span></li>
<li class="gay-guide"><span>The Gay Guide</span></li>
<li class="philosophy"><span>Magazine Design</span></li>
<li class="taxi"><span>5 Facts About Taxis</span></li>
</ul>
</div>
What is the problem?
And another small question - is there a way to get a boolean whether I am rolling over an object (something like - isHover()?)
I believe that your animation piece should be done in CSS. I have not seen any issues in Chrome doing it via CSS and performance is amazing. We went through our portal and diagnosed several JavaScript performance issues that were solved by moving things such as this and minor animation to CSS.
<ul class="myClass">
<li>One Item</li>
<li>Two Item</li>
<li>Three Item</li>
<li>Four Item</li>
</ul>
.myClass li
{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20);
opacity:.2;
-webkit-transition:opacity 1s linear;
-moz-transition:opacity 1s linear;
-ms-transition:opacity 1s linear;
-0-transition:opacity 1s linear;
transition:opacity 1s linear;
cursor:point;
}
.myClass li:hover
{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity:1;
}
Please check the jsFiddle to see it work...adjust the timing to meet your needs (s or ms)
I created a very basic example of a opacity on hover over on jsFiddle here is the link. If you have questions please comment, I think you will be very happy with this solution.