LBRYCommunity/lbry-desktop

Fork 0

Update _card.scss #341

Closed

chickenpie347 wants to merge 1 commit from patch-2 into master

chickenpie347 commented

2017-07-09 05:22:35 +02:00

(Migrated from github.com)

Added transition to cards for smoother experience.

kauffj commented

2017-07-10 15:37:16 +02:00

(Migrated from github.com)

Good idea to add more transitions! However, I would like to avoid transition all. What effects actually need transitions?

Additionally, there is a $transition-standard defined in _global.scss, I'd like to continue using this. I'd be open to changing it from 0.225s ease, as I don't think that was an especially considered choice.

Good idea to add more transitions! However, I would like to avoid transition all. What effects actually need transitions? Additionally, there is a `$transition-standard` defined in `_global.scss`, I'd like to continue using this. I'd be open to changing it from `0.225s ease`, as I don't think that was an especially considered choice.

QuirkyRobots commented

2017-07-11 15:50:07 +02:00

(Migrated from github.com)

This works well

section.card.card--small.card--link {
    -webkit-transition: all 120ms ease-in;
    -webkit-transform: scale(1);
    -ms-transition: all 120ms ease-in;
    -ms-transform: scale(1);
    -moz-transition: all 120ms ease-in;
    -moz-transform: scale(1);
    transition: all 120ms ease-in;
    transform: scale(1);
}
section.card.card--small.card--link:hover {
    z-index: 2;
    -webkit-transition: all 120ms ease-in;
    -webkit-transform: scale(1.1);
    -ms-transition: all 120ms ease-in;
    -ms-transform: scale(1.1);
    -moz-transition: all 120ms ease-in;
    -moz-transform: scale(1.1);
    transition: all 120ms ease-in;
    transform: scale(1.1);
}

This works well ``` section.card.card--small.card--link { -webkit-transition: all 120ms ease-in; -webkit-transform: scale(1); -ms-transition: all 120ms ease-in; -ms-transform: scale(1); -moz-transition: all 120ms ease-in; -moz-transform: scale(1); transition: all 120ms ease-in; transform: scale(1); } section.card.card--small.card--link:hover { z-index: 2; -webkit-transition: all 120ms ease-in; -webkit-transform: scale(1.1); -ms-transition: all 120ms ease-in; -ms-transform: scale(1.1); -moz-transition: all 120ms ease-in; -moz-transform: scale(1.1); transition: all 120ms ease-in; transform: scale(1.1); }

kauffj commented

2017-07-11 20:35:54 +02:00

(Migrated from github.com)

@Smurphonomics we are always in a current version of chrome in this app, so no need for additional browser rules. And I would like to avoid transition: all.

@Smurphonomics we are always in a current version of chrome in this app, so no need for additional browser rules. And I would like to avoid `transition: all`.

👍 1

chickenpie347 commented

2017-07-11 21:24:26 +02:00

(Migrated from github.com)

I think we can just do:

transition: transform .1s ease-in-out;c

The scale transform feels very abrupt right now, that's all I wanted to make smoother.

I think we can just do: ` transition: transform .1s ease-in-out;`c The scale transform feels very abrupt right now, that's all I wanted to make smoother.

👍 1

kauffj commented

2017-07-11 21:42:11 +02:00

(Migrated from github.com)

7c380ce01b

https://github.com/lbryio/lbry-app/commit/7c380ce01b7e9d45399f993a4ade39f9a4adce9d

QuirkyRobots commented

2017-07-12 03:52:50 +02:00

(Migrated from github.com)

I saw cross browser SCSS in the app code, so I assumed it was being coded for a web based version also?

A good idea to remove "ALL", as it can have performance issues with it containing hidden code you don't need, catering for ALL properties.

@98farhan94 transition: transform .1s ease-in-out; is much cleaner :)

I saw cross browser SCSS in the app code, so I assumed it was being coded for a web based version also? A good idea to remove "ALL", as it can have performance issues with it containing hidden code you don't need, catering for ALL properties. @98farhan94 transition: transform .1s ease-in-out; is much cleaner :)

QuirkyRobots commented

2017-07-12 13:28:06 +02:00

(Migrated from github.com)

@98farhan94 For even cleaner and more optimised code, we can omit the "transform" part as everything has already been declared.

.card-row .card {transition: .1s ease-in-out;}

*The hover event already uses scale(1.1), so you don't need to use it again. You just have to animate it with the cut down transition, short-hand code above.

@98farhan94 For even cleaner and more optimised code, we can omit the "transform" part as everything has already been declared. ` .card-row .card {transition: .1s ease-in-out;} ` *The hover event already uses scale(1.1), so you don't need to use it again. You just have to animate it with the cut down transition, short-hand code above.

chickenpie347 commented

2017-07-12 14:12:14 +02:00

(Migrated from github.com)

@Smurphonomics Actually, I just verified my concern was true. Removing the transition property defaults it to all. Reference: https://stackoverflow.com/questions/38936400/transition-without-properties-specified

So the current code seems to be the best in terms of efficiency.

QuirkyRobots commented

2017-07-12 15:20:27 +02:00

(Migrated from github.com)

Nope. Forget it. I thought omitting ALL would mean it just appended the animation parameters to the scale hover event. But it looks like omitting ALL just sets it to the initial state, which is ALL :(

So keep it to transition: transform .1s ease-in-out; after all :)

👍 1

kauffj commented

2017-07-13 00:52:47 +02:00

(Migrated from github.com)

Yep, that's basically what we added @Smurphonomics.

Re: cross-browser, it's from the pre-Electron days and should probably be removed.

Yep, that's basically what we added @Smurphonomics. Re: cross-browser, it's from the pre-Electron days and should probably be removed.