refactoring for timing
This commit is contained in:
parent
82dd65aca5
commit
07f80bdc7a
7
presets.js
vendored
7
presets.js
vendored
@ -234,6 +234,10 @@ module.exports = {
|
||||
marquee: {
|
||||
'0%': { transform: 'translateX(0%)' },
|
||||
'100%': { transform: 'translateX(-100%)' },
|
||||
},
|
||||
marquee_long: {
|
||||
'0%': { transform: 'translateX(0%)' },
|
||||
'100%': { transform: 'translateX(-350%)' },
|
||||
}
|
||||
},
|
||||
|
||||
@ -244,7 +248,8 @@ module.exports = {
|
||||
spin: 'spin 1000ms infinite',
|
||||
submit: 'submit 0.7s ease alternate infinite',
|
||||
submit_second: 'submit_second 0.7s ease alternate infinite',
|
||||
marquee: 'marquee 9s linear infinite'
|
||||
marquee: 'marquee 9s linear infinite',
|
||||
marquee_long: 'marquee_long 14s linear infinite'
|
||||
},
|
||||
|
||||
transitionProperty: {
|
||||
|
8
public/akaunting-js/generalAction.js
vendored
8
public/akaunting-js/generalAction.js
vendored
@ -370,7 +370,14 @@ function marqueeAnimation(truncate) {
|
||||
if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
|
||||
truncate.addEventListener('mouseover', function () {
|
||||
truncate.parentElement.style.animationPlayState = 'running';
|
||||
|
||||
if (truncate.offsetWidth > 400 && truncate.parentElement.clientWidth < 150) {
|
||||
truncate.parentElement.classList.remove('animate-marquee');
|
||||
truncate.parentElement.classList.add('animate-marquee_long');
|
||||
} else {
|
||||
truncate.parentElement.classList.remove('animate-marquee_long');
|
||||
truncate.parentElement.classList.add('animate-marquee');
|
||||
}
|
||||
|
||||
if (truncate.parentElement.classList.contains('truncate')) {
|
||||
truncate.parentElement.classList.remove('truncate');
|
||||
@ -380,6 +387,7 @@ function marqueeAnimation(truncate) {
|
||||
truncate.addEventListener('mouseout', function () {
|
||||
truncate.parentElement.style.animationPlayState = 'paused';
|
||||
truncate.parentElement.classList.remove('animate-marquee');
|
||||
truncate.parentElement.classList.remove('animate-marquee_long');
|
||||
truncate.parentElement.classList.add('truncate');
|
||||
});
|
||||
|
||||
|
28
public/css/app.css
vendored
28
public/css/app.css
vendored
@ -10039,6 +10039,34 @@ input[type="date"]::-webkit-inner-spin-button,
|
||||
-webkit-animation: marquee 9s linear infinite;
|
||||
animation: marquee 9s linear infinite;
|
||||
}
|
||||
@-webkit-keyframes marquee_long{
|
||||
|
||||
0%{
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-transform: translateX(-350%);
|
||||
transform: translateX(-350%);
|
||||
}
|
||||
}
|
||||
@keyframes marquee_long{
|
||||
|
||||
0%{
|
||||
-webkit-transform: translateX(0%);
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
100%{
|
||||
-webkit-transform: translateX(-350%);
|
||||
transform: translateX(-350%);
|
||||
}
|
||||
}
|
||||
.animate-marquee_long{
|
||||
-webkit-animation: marquee_long 14s linear infinite;
|
||||
animation: marquee_long 14s linear infinite;
|
||||
}
|
||||
.cursor-auto{
|
||||
cursor: auto;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user