I have a system in place that retrieves dynamically retrieves stored messages from the server, the view for it is:
<div id= "messages" data-ng-controller="MessageController">
<div class="message" data-ng-repeat="message in messages | orderBy:'timestamp':true" data-ng-animate="'animate-message'" >
<div class="user">
{{ message.user.username }}
</div>
<div class="title">
{{ message.title }}
</div>
<div class="content" data-ng-bind-html-unsafe="message.content">
{{ message.content }}
</div>
</div>
</div>
I then have in my CSS file:
.animate-message-enter {
transition: 1s linear all;
-moz-transition: 1s linear all;
-webkit-transition: 1s linear all;
-o-transition: 1s linear all;
-ms-transition: 1s linear all;
opacity:0;
position:relative;
left:-100%;
}
.animate-message-enter.animate-message-enter-active {
opacity:1;
left:0%;
}
(this is just an extreme example transition so I can see the transition working)
However, upon a new object being entered into the array via $scope.messages.push(response); the new message simply pops onto the page and no animations take place, does anyone know what I've messed up?
Thanks :)
Tried to copy paste your code into plnkr and it works fine. Do you have more code?
http://plnkr.co/edit/gi6h3adNMfoXkUdiN4lY
The only thing I added was a simple addMessage function to test the transition.
<button ng-click="addMessage()">Add Message</button>
Related
I've been experimenting with HTMX recently and I cant seem to find a way to apply a transition to a target element. I have a form that submits a GET request and returns a table.
<form class="mt-3" hx-get="/data/statement/AJAX" hx-target="#statementAJAX" >
It basically returns a div containing the table like this:
<div id="statementAJAX" class="fade-in">
</div>
the CSS for the div is the following:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Now the css transition works when i first load the page but when I execute the AJAX request nothing happens.
I tried apllying style="opacity:0" to the form but obviously it applies only to the form and not the target...
Any idea how to apply the transition to the target element?
What you have there works for me. Are you trying to replace the entire table or add to the table?
This works for me using your CSS and hx-swap="outerHTML" to replace the table.
<a href="#" id="test" hx-get="/load.html" hx-target="#table" hx-trigger="click" hx-swap="outerHTML">
Submit
</a>
<div id="table" class="fade-in"></div>
load.html
<div id="table" class="fade-in">
table content
</div>
I facing difficulty finding what causing the problem. And I appreciate your help. In the website I have set the html text direction right to left because the website in Arabic. And there is css animation which all are running normal. Except in the following condition:
When the html text direction is right to left and I'm browsing the website on mobile. Or using the device toggle option in google chrome.
When the page loads, it loads on the div which is set -100% to the left, instead of loading on the content and the div which is -100% comes to the mid on the page. And that gives the illusion that the whole web page is coming from the right. I don't know how to solve this for mobile devices I'm thinking of viewports but I couldn't find a solution.
Here is the code for the webpage
<!DOCTYPE html>
<html dir="rtl" lang="ar" >
<head>
<meta charset="UTF-8">
<title>RTL TEST SITE</title>
<style type="text/css">
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeInLeft {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: none;
}
}
#keyframes fadeInRight {
from {
transform: translate3d(100%, 0, 0);
}
to {
transform: none;
}
}
</style>
</head>
<body class="rtl" >
<div style="background:green;text-align:center;">
<a>عنوان الصفحة</a>
</div>
<div class="fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
<h2>كلمات باللغة العربية تأتي من جهة اليسار</h2>
</div>
<p>فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة </p>
<div class="fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
<h2>كلمات باللغة العربية تأتي من جهة اليمين</h2>
</div>
</body>
</html>
Here is a link for the webpage
http://lotav.com/right2left.html
Please try it out on mobile device or use google chrome with setting the device toggle into mobile device and it will misbehave. And compare it with running the site on PC browser which will work normal.
And two pictures to explain what I mean. The first one when it loads normally on the PC and the second one when it loads abnormally on the mobile. and
I don't exactly know what is going on your website, I saw it so I tried using your code and apply it on the a default button and it worked without any problems. I added the class only.
.fade-in-left {
animation: fadeInLeft ease 1s;
-webkit-animation: fadeInLeft ease 1s;
-moz-animation: fadeInLeft ease 1s;
-o-animation: fadeInLeft ease 1s;
-ms-animation: fadeInLeft ease 1s;
}
https://jsfiddle.net/HiramRamirez/6qy9e52d/
Hopefully this may help you.
I have a dynamic span with dynamic class in my smarty template. The problem here is that the CSS assigned to those classes are not rendered. Everything works if I set things to static but when changed to dynamic it will not work anymore. I'm guessing the CSS is loaded first before the elements are rendered. What would be a good workaround for this?
Smarty:
<div id="wrapper">
<div id="word">
{counter start=9 print=false}
{foreach from=$currentUser item=name}
<span class="{counter}">{$name}</span>
{/foreach}
</div>
</div>
CSS that is not rendered:
#word span.l0 {
animation-delay: 0s;
}
#word span.l1 {
animation-delay: 0.375s;
}
#word span.l2 {
animation-delay: 0.75s;
}
#word span.l3 {
animation-delay: 1.125s;
}
#word span.l4 {
animation-delay: 1.5s;
}
Try this HTML code:
<div id="wrapper">
<div id="word">
{foreach from=$currentUser item=name key=i}
<span class="span.l{i}">
{$name}
</span>
{/foreach}
</div>
</div>
I have a troublesome task. Image should be hidden and button showed by default. I want to show image and hide button, but when one animation ends, secound should start. transition should peroid 1 second. How to make it?
All code:
https://jsfiddle.net/169vuuk8/
HTML code:
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
Looks like you just need transition-delay css property for second animation: https://developer.mozilla.org/en/docs/Web/CSS/transition-delay
You can either use transitionend event in js, but it is not really needed here: https://developer.mozilla.org/en/docs/Web/Events/transitionend
Not sure what you need exactly but below the image fades in the first second and the button out after 2 seconds delay.
.showSingle img {
opacity: 0;
animation: fadeInImage 1s ease-out forwards;
}
.showSingle button {
opacity: 1;
animation: fadeOutButton 1s ease-out 2s forwards;}
#keyframes fadeInImage {
to {
opacity: 1
}
}
#keyframes fadeOutButton {
to {
opacity: 0
}
}
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
I would like to do a simple fade in animation for the items that my ng-repeat generates, I followed all the instructions on the ngAnimate site but still no dice.
Here is my module
var app = angular.module('testApp', ['ngRoute','ngAnimate']);
Here is the ng-repeat in my markup
<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
<div class="col-md-12 well well-sm" >
<div data-ng-include="'./Partials/mark.html'" />
</div>
</div>
Here is some CSS for the animation
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
And here are the scripts I'm including
<!-- JS -->
<!-- Vendor Libs -->
<script src="./js/angular.min.js"></script>
<script src="./js/angular-animate.min.js"></script>
<script src="./js/angular-route.js"></script>
<script src="./js/jquery.min.js"></script>
<!-- UI Libs -->
<script src="./js/bootstrap.min.js"></script>
<!-- App libs -->
<script src="./js/app.js"></script>
<script src="./Controllers/MarksController.js"></script>
<script src="./Controllers/ViewMarkController.js"></script>
<script src="./Services/marksService.js"></script>
*) All the required CSS files are also linked in my header.
*) Link to Project: https://www.mediafire.com/?6h1qwcrblqczjpr
You don't need the ng-animate="'animate'" directive.
All you need to do is add a class to the intended item, and add the relevant angualrjs animate classes.
Please see the code below:
.animate-repeat {
-webkit-transition: 1s linear all;
transition: 1s linear all;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}
The HTML:
<div ng-controller="RestaurantsController">
<input type="text" ng-model="search_cat.name">
<br>
<b>Category:</b>
<div ng-repeat="cat in cuisines">
<b><input type="checkbox" ng-model="cat.checked" /> {{cat.name}}</b>
</div>
<hr />
<div ng-repeat="w in filtered=(restaurants | filter:filterByCategory) " class="animate-repeat">
{{w.name}}
</div>
<hr /> Number of results: {{filtered.length}}
</div>
Please see working example here
From the source
Animations
AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following the naming conventions set in place by AngularJS or with JavaScript code when it's defined as a factory.
Animations are not available unless you include the ngAnimate module as a dependency within your application.