I am trying to make a simple fade IN and fade out example in AngularJS.I need show a div with slide up or slide down or fade in fade out as we do in jquery . I have search button on header (left top button circle)**on click I show search div it is working in my plunker. My issue is to do animation...
http://plnkr.co/edit/Z5Y51werBnzM6Yl7tcTB?p=preview
Secondly I need to add z-index because it generates new layer. When I click search button **"my name " come down when search bar is open. Why?
<ion-view>
<ion-header-bar align-title="" class="bar-positive">
<div class="buttons">
<i style="font-size:25px!important" class="icon-right ion-android-radio-button-off" ng-click="showsearch()"></i>
</div>
<h1 class="title">Title!</h1>
<a class="button icon-right ion-chevron-right button-calm"></a>
</ion-header-bar>
<div class="list list-inset searchclass" ng-show="isdiplay">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
<ion-contend>
<div style="margin-top:50px">
my name
</div>
</ion-contend>
</ion-view>
Not trying to attack you here, but just some small feedback:
I took a look at your code and its quite messy to my likings.
your html is not correct ( you have two head tags, two body tags, two html tags?)
also you write
<ion-contend> instead of <ion-content>
and in your css z-index=999px instead of z-index: 999
but anyway here you have a plunkr doing exactly what you want it to do:
Working Plunkr
basically what I changed is the following:
To make the search bar fall over the content, you should make its position absolute and not relative.
Then I used ngClass to conditionally apply the fade-in, fade-out css3 animations depending on the state of the search bar (shown/hidden)
css snippet
/* Keyframes for the fade-in */
#-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
#keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration: 0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}
Related
I want to add a transition property to an element which contains text coming from an angular controller.
I want to move it from right to left when the document loads. Is there any way to do that. here is my sample code.
Index file excerpt
<div class="logArena">
<ul class="timeline">
<li ng-repeat="log in changelogCtrl.logs | orderBy: '-dateObj'">
<span class="direction-l">
<span class="time-wrapper">
<span class="time">
{{log.date}}
</span>
</span>
</span>
<div class="direction-r">
<div class="flag-wrapper">
<div class="flag">
<span id="axis">
<span class="move-left">
<strong>{{log.module}}</strong> <strong class="fa fa-long-arrow-right"></strong> {{log.subModule}}
</span>
</span>
</div>
</div>
<div class="desc">
{{log.desc}}
</div>
</div>
</li>
</ul>
</div>
CSS Except (Right now I tried it with hover but it didn't work too, but I want it to automatically come from right to left on page load.)
#axis:hover .move-left{
transform: translate(350px,0);
-webkit-transform: translate(350px,0); /** Safari & Chrome **/
-o-transform: translate(350px,0); /** Opera **/
-moz-transform: translate(350px,0); /** Firefox **/
}
Use a CSS animation and define the values of the translation inside the keyframes. The forwards value will keep your element with the style of the last keyframe encountered.
CSS
.move-left {
animation: moveleft 2s 1 normal forwards;
}
#keyframes moveleft {
from { transform: translateX(0); }
to { transform: translateX(350px); }
}
codepen demo
This will wait just until the presence of that element on the DOM but, if you need to wait the full document load (including images and heavy assets) just add a class (e.g. .load) to the .move-left element on load event of the window and fire the animation only if the class has been applied, so the JS and CSS selector would be
Javascript
window.addEventListener("load", function(event) {
document.querySelector('.move-left').classList.add('load');
});
CSS
.move-left.load {
animation: moveleft 2s 1 normal forwards;
}
You could just use Jquery and .addClass and .removeClass.
For example
jQuery(document).ready(function($){
$('#axis').click(function(){
$('//What you want the class to be added too / Moved').addClass('move-left');
)};
)};
You can use animation property of CSS-3 in combination with translateX() property.
.row {
animation: 1s ease-out 0s 1 slide;
}
#keyframes slide {
0%{ transform: translateX(100%);}
100%{ transform: translateX(0%);}
}
Check out this answer.
I have a list of unread "comments" in a menu - when i click i want to navigate to the comments group (a card item list), higlight and scroll to its $index.
I navigate to the group of cards like so:
ng-href="#/app/comments/{{comment.group}}#{{comment.id}}"
Using $stateparams I grab the group id comment.group and list all the comments listed like so:
<div class="list card fade" ng-repeat="comment in comments track by comment.id">
<div class="item item-avatar item-button-right item-stable">
<img ng-if="!userInfo.image" src="img/icon.png">
<img ng-if="userInfo.image" ng-src="{{userInfo.image}}">
<span ng-bind-html="userInfo.status"></span><span class="dark">{{userInfo.name}}</span>
<p class="date">{{comment.date | date:'M/dd/yy'}} {{comment.date | date:'h:mma'}}</p>
<button class="button button-clear" ng-if='canDelete' ng-click='deleteComment()'>
<i class="icon ion-ios-trash-outline"></i>
</button>
</div>
<div id="{{comment.id}}" class="item item-text-wrap item-button-right">
<span style="margin-left: 10px;">"{{comment.text}}"</span>
</div>
</div>
I set the id of the item text area to the comment.id
I'm trying to fade in all the cards and highlight comment.id item with the following css/scss:
.fade.ng-enter {
/* standard transition code */
transition: 1.0s linear all;
opacity:0;
}
.fade.ng-enter-stagger {
/* this will have a 100ms delay between each successive leave animation */
transition-delay: 0.4s;
transition-duration: 0s;
}
.fade.ng-enter.ng-enter-active {
/* standard transition styles */
opacity:1;
}
//Higlighting
:target{
-webkit-animation: target-fade 3s 1;
}
#-webkit-keyframes target-fade {
0% {
background-color: rgba(255,0,0,.1) !important;
}
100%{
background-color: rgba(0,0,0,0) !important;
}
}
both the fade and target-fade animations aren't working.
I do not know how to scroll to the index of the card in ionic - I was hoping the # tag would act as an anchor and work its magic...
can anyone help with this?
Angular animation noob here.
I can successfully animate content onto the page using ngAnimate. However, when my new content slides in, all of the content below it jumps down to its new position. Likewise, when the new content is removed the following content jumps back up. Is there an angular way to animate the new position of the following content?
<button class="button" ng-if="typingResponse">
Submit!
</button>
<div class="response-section">
<label class="item item-input item-stacked-label">
<span class="input-label">Response</span>
<textarea></textarea>
</label>
</div>
.button.ng-enter {
-webkit-animate: slideInLeft 1s;
animation: slideInLeft 1s;
}
.button.ng-leave {
-webkit-animate: slideOutLeft 1s;
animation: slideOutLeft 1s;
}
#klauskpm got me most of the way there, and this blog post was the missing piece.
Solution:
Put the button inside of a div
Set the initial max-height of the div to 0px
Specify a transition on the div's max-height property
When the button is to be displayed, increase the max-height property of the div
Updated code:
<div class="button-container" ng-class="{'has-button': typingResponse}">
<button class="button" ng-if="typingResponse">
Submit
</button>
</div>
<div class="response-section">
<label class="item item-input item-stacked-label">
<span class="input-label">Response</span>
<textarea></textarea>
</label>
</div>
.button.ng-enter {
-webkit-animate: slideInLeft $slide-dur;
animation: slideInLeft $slide-dur;
}
.button.ng-leave {
-webkit-animate: slideOutLeft $slide-dur;
animation: slideOutLeft $slide-dur;
}
.button-container {
max-height: 0px;
transition: max-height $slide-dur linear;
-webkit-transition: max-height $slide-dur linear;
}
.button-container.has-button {
max-height: 100px;
}
I'm writing an Ionic framework "sidemenu" type of app (based on the sidemenu demo/starter) that allows the user to choose a theme (basically, the bars and buttons colors).
The problem is when an user clicks a button to change dynamically the theme, it only changes the color of the menu's header and not the color of the views header (stays always in the first color of the array).
Here is a codepen example (just click on the "CHANGE COLOR" button on the side menu):
http://codepen.io/anon/pen/oXqQqm
NOTE: the variable $scope.temabar starts with the "ionic color positive" ($scope.temabar = 'positive';) and is changed when the button "CHANGE COLOR" is clicked.
Can anyone tell me what i'm doing wrong?
Thanks
Well you code pen does not work so I can't tell you what is wrong but if you want to change classes dynamically I would simply use ng-class directive. It is simple, easy, fast, and works. If you are already using ng-class please fix the codepen and I will update my answer :D https://docs.angularjs.org/api/ng/directive/ngClass
and an example:
http://codepen.io/sevilayha/pen/onfrd
HTML:
<div class="container" ng-app="classApp" ng-controller="mainController">
<div class="page-header">
<h1>Dynamic Angular Classes <small>String Syntax</small></h1>
</div>
<div class="row">
<div class="col-xs-6">
<!-- FORM STUFF =========================== -->
<form>
<div class="form-group">
<input type="text" class="form-control" placeholder="Type Your Class" ng-model="superClass">
</div>
</form>
<p>Try:</p>
<ul>
<li>text-danger</li>
<li>text-success</li>
<li>text-danger</li>
<li>bg-primary</li>
<li>bg-info</li>
</ul>
</div>
<div class="col-xs-6">
<!-- NGCLASS EXAMPLE ============================ -->
<div class="jumbotron text-center">
<h2 ng-class="superClass">
Stuff Stuff
</h2>
</div>
</div>
</div>
</div>
CSS:
.bubble {
animation:pulse 1s infinite;
-webkit-animation:pulse 1s infinite;
}
#keyframes pulse {
0% { transform:scale(1); }
25% { transform:scale(2); }
75% { transform:scale(1); }
}
#-webkit-keyframes pulse {
0% { -webkit-transform:scale(1); }
25% { -webkit-transform:scale(2); }
75% { -webkit-transform:scale(1); }
}
JS:
angular.module('classApp', [])
.controller('mainController', function($scope) {
});
I am able to make input field with icon but I need the input field should be rounded corner ![enter image description here][1] and horizontally center width smaller as show in image .
please check the below image
Please check my search bar is smaller in width and horizontally centered having rounded corner .can we make this in ionic
here is my code
<ion-content>
<div class="list list-inset">
<label class="item item-input">
<img src="https://dl.dropboxusercontent.com/s/n2s5u9eifp3y2rz/search_icon.png?dl=0">
<input type="text" placeholder="Search">
</label>
</div>
</ion-content>
The answer is simple
first you need to put all you need inside ion-item tag and then you need some css properties to shape that ion-item
Example
HTML CODE :
<ion-item class="roundedInput">
<ion-label position="floating">Rounded Input</ion-label>
<ion-input></ion-input>
</ion-item>
CSS Code :
.roundedInput {
--border-color: var(--ion-color-medium-shade);
--border-radius: 3px;
--border-width: 1px;
--box-shadow: 2px gray;
--highlight-height: 0;
--background: #f8f9fa;
}
to take control of the item behavior you need some more CSS Codes
like this :
.roundedInput.ion-invalid.item-has-focus {
--border-color: var(--ion-color-danger-shade);
}
.roundedInput.ion-valid.item-has-focus {
--border-color: var(--ion-color-success-shade);
}
.roundedInput.ion-invalid.ion-dirty {
--border-color: var(--ion-color-danger-shade);
}
.roundedInput.ion-valid.ion-dirty {
--border-color: var(--ion-color-success-shade);
}
the label with floating position will increase the input height
if its not what you like , all you need to do is just change the position to static or with no position property.
or you can just use placeholder
Why not just set some attributes to your outer div and your inner label in your .css like
div#container{width: 300px; margin-left: auto; margin-right: auto;}
label#rounded{border-radius: 15px;}
Here's the pen. Is this what you're looking for?