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
Related
I'm trying to make transition effect when you click on the left side of the sidebar.
For instance if you click Ottogi (ramen noodle's name) it should change the background image, and if you'd like to know about Sajo hapyo (ramen noodle's name), it should also change the background-image. Basically for all images in the sidebar (eg. natura, maloo, dongush, may).
My program that changes the background-image works, however it stops whenever user wants to click back ottogi, it's just stopped. So, I'm guessing I should either use conditional statements or loops because it basically doing the same thing.
Please help me with that, I'm struggling so hard.
This is the website that I'm working http://test1.testkz.ru/
HTML
<section id="main-showcase">
<div class="showcase-wrapper">
<div class="left-main col-lg-3 col-md-3">
<div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
<div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
<div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
<div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
<div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
<div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>
<div class="right-main col-lg-9 col-md-9">
<div class="inner-container">
<h1>Ottogi</h1>
<h2>Южно - Корейские продукты питания высочайшего качества!</h2>
</div>
<div class="box-container">
<div class="main-wrap">
<div id="main-slider" class="first-slider">
[[getImageList?
&tvname=`goods`
&tpl=`goodsSlider.tpl`
]]
</div>
</div>
</div>
</div>
</div>
CSS
.ottogi-bg {
background: url('/assets/template/images/main_03.jpg') no-repeat center;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.sajo-bg {
background: url('../images/about-us-company-bg.jpg');
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 1s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('p.ottogi').click(function(){
$('.right-main').addClass('ottogi-bg');
});
$('p.sajo').click(function(){
$('.right-main').addClass('sajo-bg');
});
The reason is that you keep adding the class to the .right-main class. Which means that you end up with: .right-main .ottogi-bg .sajo-bg. Because sajo-bg is the last class you defined in your CSS it will always overule the ottori-bg class.
You could try this:
$('.ottogi').click(function(){
$('.right-main').removeClass().addClass("right-main ottogi-bg");
});
$('.sajo').click(function(){
$('.right-main').removeClass().addClass("right-main sajo-bg");
});
.right-main{
background-color:grey;
padding:20px;
}
.ottogi-bg{
background-color:blue;
}
.sajo-bg{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
ottogi<br/>
sajo<br/>
<div class="right-main">
Test
</div>
With this you make sure that previous class is deleted and you then you can add the desired class.
I think problem is JavaScript code.
If user click ottogi, then click sajo.
.right-main div is added ottogi-bg class
.right-main div is added sajo-bg class
after two click, .right-main has two class. Maybe client side is confused.
this solution is like that...
set below code
$('.right-main').removeClass('sajo-bj');
after
$('.right-main').addClass('ottogi-bg');
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 am trying to do a simple fade in of an element when a boolean variable is set to true. It was working fine earlier, until I changed my AngularJS version to 1.2.15. Am I doing something incorrectly?
Here is a sample JSFiddle.
<div ng-app="myApp" ng-controller="myController">
{{ready}}
<div ng-show="ready" ng-animate="{show:'animate-show'}">hello</div>
</div>
$scope.ready = false;
function displayBox() {
$scope.ready = true;
$scope.$apply();
}
setTimeout(displayBox, 1000);
Animation syntax changed in Angular 1.2.x. Now you have to use ngAnimate module as dependency and change the way you apply animation with CSS. Your HTML becomes:
<div class="animate-show" ng-show="ready">hello</div>
And in your situation you only need this simple CSS:
.animate-show {
opacity: 1;
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.animate-show.ng-hide {
opacity: 0;
}
Demo: http://plnkr.co/edit/nHZ6P6evV2Ee4NtIeMZY?p=preview
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>
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.