Noob here :)
Trying to set an ngAnimation which basically works fine except for one annoying thing.
When the page loads the ng-hide animation is running.
How can i prevent this from happening?
Here is the code:
html:
<form name="signup_form" novalidate>
<!-- USERNAME -->
<label class="item item-input ">
<input type="text" placeholder="Username" name="username" ng-model="newUser.username" autocapitalize="off" autocorrect="off" ng-minlength=4 ng-maxlength=20 required/>
</label>
<div class="error" ng-show="signup_form.username.$dirty && signup_form.username.$invalid">
<small class="error" ng-show="signup_form.username.$error.required">Username is required.</small>
<small class="error" ng-show="signup_form.username.$error.minlength">Your name is required to be at least 4 characters</small>
<small class="error" ng-show="signup_form.username.$error.maxlength">Your name cannot be longer than 20 characters</small>
</div>
Here is the css
.error {
color: #F00;
background: #F5F5F5;
text-align: center;
}
.error.ng-show {
-webkit-animation: bounceIn 1s;
-moz-animation: bounceIn 1s;
-ms-animation: bounceIn 1s;
animation: bounceIn 1s;
}
.error.ng-hide {
-webkit-animation: bounceOut 1s;
-moz-animation: bounceOut 1s;
-ms-animation: bounceOut 1s;
animation: bounceOut 1s;
}
Also tried using the ng-cloak directive but it did not help.
Would appreciate any help. Thanks a lot.
Since i could not find the reason, i started from scratch and it worked fine.
Don't really know what happened.
Related
I am having three fields as name, designation and description.
Here first I need to display name, designation first later on after some time needs to display description as of now it is displaying the total at a time.
<div class="teamspage4">
<img src="<?php echo base_url();?>admin/images/blogimages/<?php echo $r->image_path;?>" class="img-responsive teamimage"/>
<div class="teamspage5"><?php echo $r->name;?></div>
<div class="teamspage6"><?php echo $r->designation;?></div>
<div class="teamspage76"><?php echo $r->description;?></div>
</div>
Try this
.teamspage5{
opacity:0;
animation: op 1s ease forwards;
}
.teamspage6{
opacity:0;
animation: op 1s ease forwards;
}
.teamspage76{
opacity:0;
animation: op 1s ease 1s forwards;
}
#keyframes op{
0%{
opacity:0;
}
100%{
opacity:1;
}
}
<div class="teamspage5">Name</div>
<div class="teamspage6">Designation</div>
<div class="teamspage76">Description</div>
I have this code with ng-repeat and delay in css:
<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp 0.50s ease forwards;">
<span class="fec">Updated Aug 29, 2016</span>
<span class="title">Internet Banner Advertising…</span>
</div>
I need that the delay value in every item of ng-repeat , increase. For example:
First item: animation: moveUp 0.50s ease forwards
Second item: animation: moveUp 0.60s ease forwards
Third item: animation: moveUp 0.70s ease forwards
How can I make that ?
Thanks
You could use the ngStyle directive with $index.
See this working example with keyframes:
angular.module('MyApp', []);
.moveUp {
position: relative;
}
#-webkit-keyframes moveUp {
0% {
top: 500px;
}
100% {
top: 0px;
}
}
#keyframes moveUp {
0% {
top: 500px;
}
100% {
top: 0px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="MyApp">
<div class="card moveUp" ng-repeat="x in [1,2,3,4,5,6] track by $index" ng-style="{'animation': 'moveUp ' + ($index / 2) + 's ease forwards'}">
<span class="fec">Updated Aug 29, 2016</span>
<span class="title">Internet Banner Advertising…</span>
</div>
</div>
The result will give you 0.5s, 1s, 1.5s and so on...
You can substitute 0.50s in style attribute with angular expression. A simple solution would be:
<div class="card moveUp" ng-repeat="x in optionsCards" style="animation: moveUp {{ (0.5 + 0.1 * $index) + 's' }} ease forwards;">
$index contains an index of current ng-repeat element so if you multiply it by 0.1 and add to base 0.5, each item will have delay 0.1s longer than its predecessor.
I'm trying make images in a slideshow behave like links, so when user clicks on the image it will take them to that url.
The slideshow is made using css animations. It's based on this tutorial.
As you can see I already tried wrapping it in an tag but that doesn't work, I think the animation is affecting the images ability to work as a link...
My HTML
<div class="slideshow">
<figure>
<img src="c5.jpg" width="484" height="330" />
</figure>
<figure>
<img src="14.jpg" width="484" height="330" />
</figure>
<figure>
<img src="c3.jpg" width="484" height="330"/>
</figure>
<figure>
<img src="c2.jpg" width="484" height="330" />
</figure>
<figure>
<img src="12.png" width="484" height="330" />
</figure>
</div>
Some of my CSS:
.slideshow figure:nth-child(1) {
-webkit-animation: goldfade 20s 16s infinite;
-moz-animation: goldfade 20s 16s infinite;
-ms-animation: goldfade 20s 16s infinite;
animation: goldfade 20s 16s infinite;
}
.slideshow figure:nth-child(2) {
-webkit-animation: goldfade 20s 12s infinite;
-moz-animation: goldfade 20s 12s infinite;
-ms-animation: goldfade 20s 12s infinite;
animation: goldfade 20s 12s infinite;
}
#-webkit-keyframes "goldfade" {
0% {
filter: alpha(opacity=100);
opacity: 1;
}
18% {
filter: alpha(opacity=100);
opacity: 1;
}
20% {
filter: alpha(opacity=0);
opacity: 0;
}
96% {
filter: alpha(opacity=0);
opacity: 0;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
}
}
change the href to the img's src property, if you're trying to open the image:
<a href="c13.jpg">
<img src="c13.jpg">
</a>
wrap the image tags with an anchor tag and provide the href attribute your desired link.Then your image will act like a link.That might serve your purpose
<a href='....your link...'>
<img src='imageName.png'>
</a>
I am seeking to do the same thing, but neither answer above seems to work. The example given above already has each <img> surrounded with an anchor. When I try wrapping each image with a unique anchor, only the last anchor defined works.
Add anchor tag in all slider_images for providing link:
<a href='link of page that you want to open'>
<img src='image.jpg'>
</a>
I'm creating a form in angularjs in which there are two ngShow for error messages. Now, I want to crossfade these two messages placing them in the same spot. But, i'm not sure how to get it.
Here is the plunker link: http://plnkr.co/edit/EcT2oOmClz65WUgXgG4g?p=preview
I'm using 1.2.4 and linked the ng-animate lib. Right now the animation (fading in/out) is achieved using CSS not JS:
html:
<input type="email"
name="email"
class="form-control"
id="email"
placeholder="Email"
maxlength="100"
title="Company issued email address"
required
ng-class=""
ng-model="user.email"
ng-blur="buyContactForm.email.$blured = true" />
css:
.errAnimate {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
.errAnimate.ng-show{
opacity: 1;
}
.errAnimate.ng-show-add, .errAnimate.ng-show-remove {
display:none!important;
}
.errAnimate.ng-hide{
opacity: 0;
}
.errAnimate.ng-hide-add, .errAnimate.ng-hide-remove {
display:block!important;
}
JS:
myApp.controller('myCtrl', function($scope){
$scope.user={
email: ''
};
$scope.showFieldError = function(formField, error, blured){
if(blured){
return formField.$error[error] && !formField.$pristine && formField.$blured;
}else{
return formField.$error[error] && !formField.$pristine;
}
};
// set live validation function for view load mode
$scope.showError = $scope.showFieldError;
});
The way you can do it is by adding position: absolute to the container's style, like this:
.errAnimate {
position: absolute;
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
min-height: 22px;
}
This will make both errors have the same position while fading, and thus overlapping (which is what I think you mean by crossfading)
I also had to change the width of the container because its width was making the error messages span several lines.
Here is a link to the edited plunker
I am using bootstrap 3 to create my nav bar. I also needed to place a search bar on the navbar. So my code looks like this
<div class="navbar navbar-default">
<a class="navbar-brand">Logo Image</a>
<ul class="nav navbar-nav">
<li class="active">Calendar</li>
<li>Customerr</li>
<li>Providers</li>
</ul>
<form class="navbar-form navbar-right" action="">
<div class="form-group">
<input type="text" class="form-control mac-style" name="Search" id='nav-search' placeholder="Search">
</div>
<input type="submit" name="search" value="Search" class="btn btn-default" >
</form>
</div>
I want the input box to get bigger when the usere focuses to search but to the left like stack's search bar. I tried the following css at first
.mac-style:focus{
width: 500px;
}
and the input box grows to the left but the transition is very rough. So i tried to add the transition property(webkit moz o an default) like this
.mac-style:focus{
width: 500px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
but the input changes width to the right going behind the search button and off the nav-bar. Ho can i make it act like the css without the transition(grow to the left). The way my nav bar is created, is there a way to make it stop when it reaches the last li so it is more dynamic?
If i correctly understand you - take a this fiddle . I don't know yours other css styles, but you can a create your fiddle and show it to us.
The reason is, you should give width to normal state also.
JSFIDDLE : http://jsfiddle.net/surjithctly/mdXqr/
.mac-style {
width: 100px;
-webkit-transition: width 1s ease-in-out;
-moz-transition:width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
transition: width 1s ease-in-out;
}
.mac-style:focus{
width: 260px;
}