I've got this simple list of countries and I'm trying to get them to animate on entrance but I can't seem to find what's stopping this from working?
<ul>
<li ng-repeat="country in countries" type="country" class="slide">
<a ui-sref="state5"> {{country.name}}</a>
</li>
</ul>
css file:
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
}
animate.js file:
countryApp.animation('.slide', [
function() {
return {
enter: function(element, doneFn) {
jQuery(element).slideIn(1000, doneFn);
}
}
}]
Can someone perhaps clarify this for me? Thanks
your css style only working for firefox. if you want chrome use -webkit prefix
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
-webkit-transition:0.5s linear all;
-webkit-transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
-webkit-transform:translateY(0);
}
Related
I want to change the opacity of my fixed navbar background when user scrolling the page. Initially navbar background should be transparent and when scrolling down it background needs to be change to white.
Like this example https://codepen.io/michaeldoyle/pen/Bhsif
I have found various examples for this scenario using jquery. But I need to achieve this using vuejs.
$(window).scroll(function() {
if ($(document).scrollTop() > 200) {
$('nav').addClass('transparent');
} else {
$('nav').removeClass('transparent');
}
});
I tried above code inside my vue page. I put it inside mounted(). But it doesn't work. I need to done this using vue. Not like above jquery.
<nav class="navbar navbar-inverse">
<ul class="nav menu">
<li>
<router-link to="/about" #click.native="closeNavBarFromChild">About</router-link>
</li>
<li class="hidden-lg hidden-md">
<router-link to="/product" #click.native="closeNavBarFromChild">Product</router-link>
</li>
</ul>
</nav>
This is how my navbar component looks like.
nav.navbar{
-webkit-transition: all 0.4s ease;
transition: all 0.8s ease;
}
.navbar-inverse {
background-color: rgba(255,255,255,0);
}
nav.navbar.transparent {
background-color:rgba(0,0,0,1);
}
this is the css part that i used.
Set your listener in created lifecycle hook:
export default {
created () {
window.addEventListener('scroll', this.onScroll);
},
destroyed () {
window.removeEventListener('scroll', this.onScroll);
},
methods: {
onScroll (event) {
// add/remove class
}
}
}
I'm trying to use ngAnimate(v1.4) for ng-option but I couldn't find any animate event for it in angularjs documentation. Does anyone know if ng-option directive animation aware? Can anyone provide a link for reference or an example?
I'm trying to add animation to select2 dropdown using angularjs ngAnimate. But not able to do so. See the fiddle https://jsfiddle.net/ashishU/o6ojj9xs/
I'm not sure which ngAnimate event to add the animation to. It doesn't seem to work.
Below is my code:
HTML
<div ng-app="testApp">
<div ng-controller="testCtrl">
<select class="dd1" ng-model="dropDown1" ng-options="value for value in dropDownValue1">
<option value="">{{dropDownName1}}</option>
</select>
JAVASCRIPT
angular.module("testApp", ["ngAnimate"]).controller("testCtrl", function($scope) {
$scope.dropDownName1 = "animateDD1";
$scope.dropDownValue1 = ['This', 'IS', 'Animation', 'For', 'DD1'];
$(".dd1").select2();
});
CSS
#keyframes openDD {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes closeDD {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.dd2.ng-enter {
animation: openDD 2s;
}
.dd2.ng-leave {
animation: closeDD 1s;
}
So the problem I am having is that I can't seem to get my jQuery Function to add a class to start my animation? I have tried a lot of different ways to get it to work, none of them are working!
jQuery
$(document).ready(function(){
window.onload = function render(){
$('.title .sub-title').addClass('render');
}
});
CSS
.render {
animation-name: render;
animation-duration: 2s;
animation-timing-function: ease-in-out;
}
#keyframes render {
0% { transform: translateX(-800px); }
100% { transform: translateX( 0px ); }
}
HTML
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1><!--Need To add animation
<h4 class="sub-title">- Here is a Template Slogan -</h4><!--Need To add animation to-->
</div>
Please can someone help?
It would be very beneficial!
Try the following:
$(document).ready(function(){
$('.title, .sub-title').addClass('render');
});
The code in your example is targeting a .sub-title element nested within a .title element. Including a comma in your CSS selector should fix this.
Your .sub-title class is commented out. Try this:
<div class="site-header-title-wrapper">
<h1 class="title">Template 1</h1>
<h4 class="sub-title">- Here is a Template Slogan -</h4>
</div>
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 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.