I'm trying to slide in a div and slide out another from left to right.
<div class="moveleft" ng-switch="article">
<div ng-switch-when="1">
...hi...
</div>
<div ng-switch-when="2">
...bye...
</div>
</div>
I want to do this sliding on a button click:
<button ng-click="changeori()">Hi</button>
In my AngularJS file:
$scope.article = 1;
$scope.changeori = function() {
$scope.article = $scope.article == 1 ? 2 : 1;
}
And for my moveleft class:
.moveleft, .moveright {
transition: 2000ms cubic-bezier(0.420, 0.000, 0.580, 1.000) all;
}
.moveleft.ng-enter {
left: 100%;
}
.moveleft.ng-enter-active {
left: 0;
}
.moveleft.ng-leave {
left: 0;
}
.moveleft.ng-leave-active {
left: -100%;
}
Problem: On clicking the button, the first div hides after 2 seconds and the second div comes on the click as expected, but the animations for slide are not happening.
You are probably using the ng-animate wrong.
See this working demo
2 items(div) respond through animation css as below
.item {
position: absolute;
top: 35px;
bottom: 0;
right: 0;
left: 0;
animation-duration: 0.30s;
animation-timing-function: ease-in-out;
-webkit-animation-duration: 0.30s;
-webkit-animation-timing-function: ease-in-out;
}
.item.ng-enter {
animation-name: slideFromRight;
-webkit-animation-name: slideFromRight;
}
.item.moveToLeft.ng-enter {
animation-name: slideFromLeft;
-webkit-animation-name: slideFromLeft;
}
.item.ng-leave {
animation-name: slideFromLeft;
animation-direction: reverse;
-webkit-animation-name: slideFromLeft;
-webkit-animation-direction: reverse;
}
.item.moveToLeft.ng-leave {
animation-name: slideFromRight;
animation-direction: reverse;
-webkit-animation-name: slideFromRight;
-webkit-animation-direction: reverse;
}
Related
I am new to css and javascript. I am trying to animate the spans within an h2 to fall from the top of the page on load and then on hover to have a bouncy effect. I was able to make them happen both BUT now the problem is that the animation delay I intended for the fall animation are applying to the bounce animation as well. When I add the animation name to the animation delay all the letter fall at the same time. What am I missing?
I tried specifying the animation name for the animation delay but it didn't work. When I add the animation name to the animation delay all the letter fall at the same time. What am I missing?. And I also tried to change the animation delay in JS after the first animation happens but wasn't able to figure out.
This is my html
<h2 class="test">
<span class="q">T</span><span class="q">a</span><span class="q">d</span><span
class="q">a</span><span class="q">a</span><span class="q">k</span><span class="q">i</span>
</h2>
<h2 class="test2">
<span class="q2">K</span><span class="q2">u</span><span class="q2">w</span><span
class="q2">a</span><span class="q2">y</span><span class="q2">a</span><span
class="q2">m</span><span class="q2">a</span>
</h2>
This is the CSS
span {
color: black;
font-size: 1em;
display: flex;
margin-bottom: 0;
padding-bottom: 0;
}
.onLoadAnimation {
position: relative;
transform: translateY(-100vh);
animation: fall 1s forwards;
animation-iteration-count: 1;
}
#keyframes fall {
100% {
transform: translateY(0);
}
}
.test span:nth-child(2) {
animation-delay: 0.1s;
}
.test span:nth-child(3) {
animation-delay: 0.2s;
}
.test span:nth-child(4) {
animation-delay: 0.3s;
}
.test span:nth-child(5) {
animation-delay: 0.4s;
}
.test span:nth-child(6) {
animation-delay: 0.5s;
}
.test span:nth-child(7) {
animation-delay: 0.6s;
}
.test2 span:nth-child(1) {
animation-delay: 0.1s;
}
.test2 span:nth-child(2) {
animation-delay: 0.12s;
}
.test2 span:nth-child(3) {
animation-delay: 0.3s;
}
.test2 span:nth-child(4) {
animation-delay: 0.4s;
}
.test2 span:nth-child(5) {
animation-delay: 0.5s;
}
.test2 span:nth-child(6) {
animation-delay: 0.6s;
}
.test2 span:nth-child(7) {
animation-delay: 0.7s;
}
.test2 span:nth-child(8) {
animation-delay: 0.8s;
}
.spanHoverEffect {
color: #0f4c5c;
animation: animate 0.6s;
}
#keyframes animate {
25% {
transform: scale(0.8, 1.3);
}
50% {
transform: scale(1.1, 0.8);
}
75% {
transform: scale(1.1, 0.8);
}
}
This is the JS
let letters = document.getElementsByClassName("q");
let lettersTwo = document.getElementsByClassName("q2");
window.onload = () => {
for (l of letters) {
l.classList.toggle('onLoadAnimation');
l.addEventListener('mouseover', function () {
this.classList
.remove('onLoadAnimation')
.add('spanHoverEffect')
});
l.addEventListener('mouseout', function () {
this.classList
.remove('onLoadAnimation')
.remove('spanHoverEffect')
});
}
for (l of lettersTwo) {
l.classList.toggle('onLoadAnimation');
l.addEventListener('mouseover', function () {
this.classList
.remove('onLoadAnimation')
.add('spanHoverEffect')
});
l.addEventListener('mouseout', function () {
this.classList
.remove('onLoadAnimation')
.remove('spanHoverEffect')
});
}
};
In this fiddle, I made two changes. The letters fall in sequence in Chrome, Firefox and Edge and the animation delay is not present when moused over in any of those browsers.
I added the onLoadAnimation class to the CSS for each letter.
.test .onLoadAnimation:nth-child(2) {
animation-delay: 0.1s;
}
And I removed the chained changes to classList, which is not something that classList supports in any of the browsers mentioned above.
l.classList.remove('onLoadAnimation')
l.classList.add('spanHoverEffect')
The reason I mention web browsers is that "this.classList.remove('onLoadAnimation').add('spanHoverEffect')" causes an error in all of those browsers, because remove returns undefined, so I am wondering if you are using a less-used browser that may work differently.
i am trying to make a collapsible content, but the css won't accept the "max-content" property in animation. i get the error: "Invalid value: max-content" for the height of the content.
when i set the the height without #keyframes it works, but i want it to be animated
.full {
animation-name: fullText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.short{
animation-name: shortText;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
#keyframes fullText {
from { height: 150; }
to { height: max-content; }
}
#keyframes shortText {
from { height: max-content; }
to { height: 150; }
}
Make sure your browser support max-content
https://caniuse.com/#search=max-content
I am creating a sticky header and it works fine but my problem is on "jump" when someone scroll down the page jumping some pixels and has no smoothness. I find some similar topics but I can not make it work for my website,
var navbar = document.getElementById("my_header");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
window.onscroll = function() {myFunction()};
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index:999;
padding:18px 0 0 0;
-webkit-transition: all 1.3s;
-moz-transition: all 1.3s;
-ms-transition: all 1.3s;
-o-transition: all 1.3s;
transition: all 1.3s;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.75s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="topnavbar"></div>
<div id="my_header" style="width:1150px; background: #181818;">
<div style="width: 100%;margin: -18px auto 0; padding: 0;">
<div id="header"></div>
</div>
</div>
<div id="content"> ... </div>
you can find the demo at JSFIDDLE too.
my website is oipeirates.tv
Thank you in advance.
Check this This is a ready solution :)
Let's get rid of this unnecessary transitions. Do you want to achieve this effect?
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index:999;
padding:18px 0 0 0;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.75s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
http://jsfiddle.net/oipeirates/y41f98dg/39/
Specify what you want to animate, change transition: all 1.3s; to transition: opacity 1.3s;. Now the padding:18px 0 0 0; will not be animated, and the jumping behavior of the sticky header will be prevented.
JSFiddle : http://jsfiddle.net/y41f98dg/54/
i dont have problem to remove the transition or animation i just want to make it smooth with no jumping. but im totally tilted im trying so much days and i cant do this :/
So I have got different animations made in CSS, though the problem is that they start right away when the page loads (ofcourse). I do not want this though. Is there a way in Vanilla JavaScript to get the animation to fire up only when it is in the viewport?
I have searched in a lot of places, but I either find a plugin I need to use or jQuery.
HTML:
<div class="introduction">
<h1>I can do the following for you:</h1>
<ul>
<li>Create a custommade, new website.</li>
<li>Code a PSD template into a working website.</li>
<li>Rework an outdated website.</li>
<li>Clean up messy code of a website.</li>
</ul>
</div>
CSS:
#keyframes showOnLoad {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.introduction li {
list-style-type: none;
margin-bottom: 5px;
text-align: center;
opacity: 0;
-webkit-animation: showOnLoad;
animation: showOnLoad;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.introduction li:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.introduction li:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.introduction li:nth-child(4) {
-webkit-animation-delay: 3s;
animation-delay: 3s;
}
This is the code you need.
window.addEventListener("scroll", onScroll);
function onScroll() {
for (var item of document.querySelectorAll(".introduction li")) {
elementVisible(item);
}
}
function elementVisible(el) {
let top = el.offsetTop;
let height = el.offsetHeight;
let bottom = top + height;
let IsOverBottom = top > (window.pageYOffset + window.innerHeight);
let IsBeforeTop = bottom < window.pageYOffset;
if (!IsOverBottom && !IsBeforeTop) {
el.classList.add("show");
}
}
And a bit of CSS
#keyframes slideIn {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}
.show {
animation: slideIn 5s ease-in-out;
}
This is a basic implementation but it gets you closer.
http://jsbin.com/hetapaj/1/edit?css,js,output
I want to slide in a fullscreen div from the top using CSS. I am using AngularJS (ionic framework) but attempting to keep this animation pure css. The div won't slide down in Safari (works in Chrome) - it just appears. But it will slide back up properly.Here's the code:
HTML:
<div class="slideDown ng-hide" id="gallery-overlay" ng-show="showGallery" ng-click="hideGalleryClick()"></div>
CSS:
.slideDown{
-webkit-animation-name: slideDown;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#-webkit-keyframes slideDown {
0% {
-webkit-transform: translateY(-100%);
}
100% {
-webkit-transform: translateY(0%);
}
}
.slideUp{
-webkit-animation-name: slideUp;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: ease;
visibility: visible !important;
}
#-webkit-keyframes slideUp {
0% {
-webkit-transform: translateY(0%);
}
100% {
-webkit-transform: translateY(-100%);
}
}
JS:
$scope.showGalleryClick = function() {
$('#gallery-overlay').removeClass('slideUp');
$('#gallery-overlay').addClass('slideDown');
$scope.showGallery = true;
}
$scope.hideGalleryClick = function() {
$('#gallery-overlay').removeClass('slideDown');
$('#gallery-overlay').addClass('slideUp');
$scope.showGallery = false;
}
Is the problem with translateY(-100%) ?? How can I make this div slide in from the top and slide back up?
Converted to transitions instead of animations.
Fixed ng-click on anchor tag causing page to post by preventDefault().
Converted show/hide to toggle.
function GalleryCtrl($scope) {
$scope.toggleGallery = function($event) {
angular.element(document.querySelector('#gallery-overlay')).toggleClass('slideDown');
$event.preventDefault();
$event.stopPropagation(); /* Not required, but likely good */
};
}
#gallery-overlay {
position: absolute;
top: -100px;
left: 0;
right: 0;
height: 100px;
background-color: #222;
transition: all 1s ease;
}
#gallery-overlay.slideDown {
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="GalleryCtrl">
<div>
Click me to slide panel down
</div>
<div id="gallery-overlay" ng-click="toggleGallery($event)"></div>
</div>
</div>