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>
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’ m doing an animation for a website.
My client wants a row with some images.
These images have to translate constantly on load, but when I click in the row, the images must accelerate as an exponential function for 4 seconds: after that, the website must change page.
Yesterday I have created the animation, changing the animation-duration every some millis by an hook, that strategy was working perfectly, but I don’t like that because it seems to be too heavy.
Now I have found another solution that uses only css and an hook to change the class.
Given this new solution, I still have 2 issues:
after the click, the animation restarts
the second part of the animation calculates the delay from the start and not from the first part of animation
Thank you for your reply
const row = document.querySelector(".row");
row.addEventListener("click", () => row.classList.add('row-click'));
.row{
display: flex;
flex-direction:row;
overflow: hidden;
}
.cell{
background:#f00;
color:#fff;
font-size:26px;
min-width:100px;
margin-right:12px;
animation: slide-first-desktop 10s linear infinite;
}
.row-click > .cell{
animation:
slide-first-desktop 5s cubic-bezier(1,0,.74,1),
slide-first-desktop 2s linear infinite;
}
#keyframes slide-first-desktop {
0%{
transform: translateX(0px);
}
100% {
transform: translateX(-1680px);
}
}
<div class="row">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
<div class="cell">9</div>
<div class="cell">10</div>
<div class="cell">11</div>
<div class="cell">12</div>
<div class="cell">13</div>
<div class="cell">14</div>
<div class="cell">15</div>
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
Instead of relying on the animation-delay to queue the two animations, you can listen to animation events in JavaScript: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event
const animation = document.querySelector('p.animation');
animation.addEventListener('animationstart', () => {
console.log('animation started');
animation.classList.add('animation-running');
// do something
});
animation.addEventListener('animationend', () => {
console.log('animation ended');
animation.classList.remove('animation-running');
// do something
});
In the example, I'm using the events to toggle a animation-running class. You could use this to check if an animation is running and prevent to restart it on click.
I have a vuetify card like this :
<v-card class="news__card">
<v-card-media
:src="ip.images[0].url"
height="150px"
#click="onLoadNews(ip.id)"
/>
<v-card-title primary-title #click="onLoadNews(ip.id)">
<div class="news__card__down">
<h3 class="subheading font-weight-medium">{{ ip.headline }}</h3>
<div class="published">{{ ip.date }}</span> </div>
</div>
</v-card-title>
</v-card>
And i want to give an effect hover the card that apply a transform on the background image. It works when i hover .v-card__media__background with this :
.v-card__media__background:hover {
position: relative;
animation: scaleMe 500ms ease-in-out 0s forwards;
}
#keyframes scaleMe {
100% {
transform: scale(1.2);
}
}
but i would like to have this effect when hovering everywhere in the card.
You can use the following solution to solve your problem:
.news__card:hover .v-card__media__background {
// your animation...
}
I am using ngAnimate to animate entries in an ng-repeat. When loading the data all elements are animated as I have defined in my css:
.chat-message.notice.ng-enter {
-webkit-animation: rubberBand 1s;
-moz-animation: rubberBand 1s;
-ms-animation: rubberBand 1s;
animation: rubberBand 1s;
}
This works when a notice is appended with the following html:
<ul>
<li class="media chat-message pointer fade-animate"
ng-repeat-start="message in guestbook.messages track by $index"
ng-if="!message.bot">
<!-- more html -->
</li>
<li class="chat-message notice" ng-repeat-end ng-if="message.bot">
<div>
<p class="text-center">
{{ message.message }}
<small>({{ message.date | amTimeAgo }})</small>
<span class="close pull-right" ng-click="guestbook.remove(message)">×</span>
</p>
</div>
</li>
</ul>
However, when a new message is appended (at the top), every element is again animated. Is there a way that elements animate only once? That when a new message is appended to the array, only that element will animate?
JSFIDDLE
EDIT
After a few clicks on a 'new message', I can see not all notices are animated. Maybe it has something to do with the ng-repeat-start and ng-repeat-end?
If understood correctly just change this:
$scope.messages.unshift(message);
to this:
$scope.messages.push(message);
Even above answer fixed the problem, my solution might be helpful in other scenarios. The fix is pretty straightforward.
Use Angular varible $first and just add CSS class for the first element using ng-class directive in your HTML. In this example, class "first" will be added only to first element in ng-repeat:
ng-class="{'first': $first===true}"
and then apply animation rules to element with "first" CSS class
.chat-message.notice.first.ng-enter {
color:red !important;
font-weight:bold;
animation: rubberBand 1s;
}
Updated JSFIDDLE: http://jsfiddle.net/t6x3a1zj/7/
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>