Smooth card expandable animation + solution

1

hi @nolimits4web :slightly_smiling_face: , thanks for this great component!
i found out it’s so cpu intensive because of backdrop-filter blur effect (like box-shadow!) ;
there is a trick which is very usable animating heavy effects i want to share.
instead of keyframes or transition of backdrop-filter blur from 0 to 15, we could do this:

.card-backdrop {
  transform: translate3d(0, 0, 0);
  animation: none;
}

.card-backdrop::after {
  backdrop-filter: blur(15px);
  position: absolute;
  transition: 0.2s all linear;
  top: 0;
  left: 0;
  content: "";
  opacity: 0;
  width: 100%;
  height: 100%;
}

.card-backdrop-in::after {
  opacity: 1;
}

this way we animate opacity and it’s super fast and performant, even on low end devices! :smiley:

1 Like
2

just curious

did you try f7 way?

card-content-padding used to add extra padding to card-content

card-outline - additional class that can be added to card element to make it outline

##This one##
no-shadow - additional class that can be added to card element to remove its shadow

no-border - additional class that can be added to card element to remove its border (for outline card)

i dont know if this would achieve the same result you are looking.

doc:
https://framework7.io/docs/cards.html#card-layout

3

@pvtallulah it is about blur backdrop on expandable card, which is slow in Chrome (and in Android). @Ars_Rza good catch, thanks, i think i will put similar fix to core

2 Likes
4

ok, thanks for the clarification!