Hej,
Mam tabelę, która się odświeża dynamicznie za pomocą komunikatów przez signalR. Chciałbym, żeby pole, które się odświeżyło podświetliło się na chwilę i zgasło. Jak coś takiego zrobić - zarówno od strony CSS jak Angulara? Wiem, że w CSS można ustawić transition time, więc efekt zabłyśnięcia można zrobić - tylko czy się da to po chwili wygasić? Od strony Angulara wydaję mi się, że wystarczy onchange i ngclass, chociaż nie jestem pewien. Ktoś może coś podobnego zrobił?
Moim zdaniem SignalR nie ma znaczenia. Bo nie ważne jaką technologią pobierasz dane, ważne gdzie te dane mają być podświetlone. Propozycja rozwiązania Angular 8 - blink td when its value changes
w końcu poradziłem sobie w pewnym sensie poprzez angularowe animacje:
animations: [
trigger('valueAnimation', [
transition(':increment', [
style({ color: 'green' }),
animate('0.8s ease-out', style('*'))
]
),
transition(':decrement', [
style({ color: 'red' }),
animate('0.8s ease-out', style('*'))
]
)
])
]
działa to o tyle, że zmienia animacją kolor czcionki na chwilę, natomiast nie jestem w stanie uzyskać efektu podświetlenia w taki sposób, że by się pojawiało na chwile halo w jakimś kolorze - czyli box-shadow, albo chociaż podkreślenie - text-decoration. Niestety w polu style({}) daje się wprowadzić tylko proste style - kolory, wielkość czcionki, itd. Czy jest jakaś opcja jak to obejść?
Robisz taki styl style({ color: 'green' }),, zmień color na to co chcesz uzyskać. W twoim przypadku pewnie będzie boxShadow.
Niestety w polu style({}) daje się wprowadzić tylko proste style - kolory, wielkość czcionki, itd.
Skąd masz taką informację?
Jak zrobię:
style({ color: 'red' , box-shadow: '0px 4px 4px rgba(200, 200, 200, 1)' }),
to kompilator mi rzyga błędem
Czy ja napisałem box-shadow?
Wpisałem box-shadow, bo tak mam ostylowane inne elementy w aplikacji. Natomiast jak się wpisze bez myślnika, to owszem, się kompiluje, ale nic się nie dzieje jeżeli chodzi o efekt wizualny, dodatkowo wyświetla się warning:
The provided CSS properties are not recognized properties supported for animations
Więc jednak jest jakiś zbiór properties'ów CSS, które można do angularowej animacji podłączyć, ale niestety nie mogę tego znaleźć w żadnej dokumentacji.
K
Nie, zwyczajnie różnica polega na tym, że zamiast myślnika jest camelCase:
background-color = backgroundColor
box-shadow = boxShadow
font-size = fontSize
Wygląda, że tutaj działa 
Angular Animation which creates short highlight
Ok, dzięki. Nie miałem pojęcia o camelCase.