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: {
|
marquee: {
|
||||||
'0%': { transform: 'translateX(0%)' },
|
'0%': { transform: 'translateX(0%)' },
|
||||||
'100%': { transform: 'translateX(-100%)' },
|
'100%': { transform: 'translateX(-100%)' },
|
||||||
|
},
|
||||||
|
marquee_long: {
|
||||||
|
'0%': { transform: 'translateX(0%)' },
|
||||||
|
'100%': { transform: 'translateX(-350%)' },
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -244,7 +248,8 @@ module.exports = {
|
|||||||
spin: 'spin 1000ms infinite',
|
spin: 'spin 1000ms infinite',
|
||||||
submit: 'submit 0.7s ease alternate infinite',
|
submit: 'submit 0.7s ease alternate infinite',
|
||||||
submit_second: 'submit_second 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: {
|
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) {
|
if (truncate.offsetWidth > truncate.parentElement.clientWidth || truncate.offsetWidth > truncate.parentElement.parentElement.parentElement.clientWidth) {
|
||||||
truncate.addEventListener('mouseover', function () {
|
truncate.addEventListener('mouseover', function () {
|
||||||
truncate.parentElement.style.animationPlayState = 'running';
|
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');
|
truncate.parentElement.classList.add('animate-marquee');
|
||||||
|
}
|
||||||
|
|
||||||
if (truncate.parentElement.classList.contains('truncate')) {
|
if (truncate.parentElement.classList.contains('truncate')) {
|
||||||
truncate.parentElement.classList.remove('truncate');
|
truncate.parentElement.classList.remove('truncate');
|
||||||
@ -380,6 +387,7 @@ function marqueeAnimation(truncate) {
|
|||||||
truncate.addEventListener('mouseout', function () {
|
truncate.addEventListener('mouseout', function () {
|
||||||
truncate.parentElement.style.animationPlayState = 'paused';
|
truncate.parentElement.style.animationPlayState = 'paused';
|
||||||
truncate.parentElement.classList.remove('animate-marquee');
|
truncate.parentElement.classList.remove('animate-marquee');
|
||||||
|
truncate.parentElement.classList.remove('animate-marquee_long');
|
||||||
truncate.parentElement.classList.add('truncate');
|
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;
|
-webkit-animation: marquee 9s linear infinite;
|
||||||
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{
|
||||||
cursor: auto;
|
cursor: auto;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user