12 replies to this topic

[paul_t]

As per title - trying to fade in the pop up modal (or any other animation)

tia

[James B]

Hi there, you can probably set the transitions using css. I can see you have the below code currently in your modal css, have you managed to resolve this since posting?

Please Login or Register to see this Hidden Content

You can find out more on transitions here

Please Login or Register to see this Hidden Content

[paul_t]

This must be another user - my test page isn't public?
but all useful info.

Back to the question - I was just looking through the Demo Cheat Sheet and couldn't figure how to use ' @transition' or find an example of complete syntax or context. I thought mentioning it with something that was animated, like the modal pop up would be a good starting point. I don't have any problem with transitions using javascript alone - but can't see how to tie them in with @transition Mixins LESS BootStrap etc (this is all new to me but its starting to make sense)

tia

btw - this is the first week I've really used these forums and have to say I'm impressed with the level support.

[Rob]

I'm not sure what you mean by "This must be another user - my test page isn't public?"

James answered the question of transition by providing a CSS solution and a link that explains more about it.

We don't support modifications to Twitter Bootstrap. CSS is the solution for transitions.

[beardedavenger]

Try this..

.alpha {
.transition(.2s ease-in-out);
}

[paul_t]

I'm not sure what you mean by "This must be another user - my test page isn't public?"

James answered the question of transition by providing a CSS solution and a link that explains more about it.

We don't support modifications to Twitter Bootstrap. CSS is the solution for transitions.

James is talking like he's seen the site and code. Which AFAIK isn't possible. No one has access to the site I registered with PL. My test page as its behind a holding front page and the test page is passworded. Hence the confusion.

Appreciate you don't support other products - but this '@transition' variable/example is part of your new product (its in YOUR cheat sheet).

Please Login or Register to see this Hidden Content

Its not explained or put in context. You and the developers amongst you may know what is does, but there is a paying customer here that doesn't. Hence a reasonable request for more (in context) information.

Sometimes I really wish we could have conversations because this reply from Rob seems is the complete antithesis of everything I've experienced so far and more like * off! we are done!

[paul_t]

Try this..

.alpha {
.transition(.2s ease-in-out);
}

Appreciate the feedback and suggestion - ta.


But I'm still stumped by the '@transition' as apposed to '.transition' how is it used (in context with Pagelines)

So - what's above is will apply a transition to any item with the class .alpha when.......

it appears on the page?
is animated?


I get the feeling I just need that little nudge to get over that bump in the learning curve if a few words can get me moving in the right direction - that would be much appreciated . I'll happily stick my head in a manual, when I know what I'm looking for.

[James B]

Hi there, i saw a modal on this site **URL - Removed by Users request** so assumed it was the one you mentioned as no other site was listed. Apologies

I'm not sure where you've seen @transition, I can see no reference to it in our core docs (since writing have seen your link to the cheat sheet, i can only see it listed as .transition though)

.transition is a Less mixin and a css instruction. You'd implement it like

Please Login or Register to see this Hidden Content

Check out this article one of our developers Nick Haskins wrote on the basics of Less, including examples of how to use Less, mixins and variables. This will give you the basis of how a mixin works and how to apply it inside the framework -

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content

and

Please Login or Register to see this Hidden Content

[Rob]

To provide some enlightenment on several key points:

Our moderator staff uses the link provided in your profile (which only you and we can see) unless another link is provided. We've posted on this forum several guidelines asking our clients to provide a link to the sites they're working on. If a link isn't available, our moderator team quite reasonably assumes that the link in the profile is the one being discussed. Kindly, in future, clarify your posts to ensure that our staff knows what to look for.

Twitter Bootstrap uses both CSS and its own coding. Both @transition and .transition are correct things and should not be confused. To be clear, .transition is a CSS element, while @transition is a bootstrap variable. They are used in different ways.

I'd suggest you try Nick's CSS snippet in Custom Code > CSS Rules or one of the other preferred styling locations.

My reply to you was not rude, however, your answer was incredibly so. Kindly understand we do try to provide premium support to all our clients. And none of us have been rude to you nor have we failed to provide prompt replies. It was quite unfair to impugn the replies we provided. Twitter Bootstrap is so new that we've not become familiarized with it.

Thank you for your understanding.

[paul_t]

OK - there has been some misunderstanding here that has escalated.

To set the record straight.

Having got an answer out of the blue for a site that has a holding page front end - was odd.
Having been pointed to W3schools rather than explaining something which is now core to PL - was odd, compared to the great support I've experience this week.
Having that reiterated, as a job done, to me appeared rude.
The typed word is often cold and misconstrued - looks like the case here.

The last few days have seen my first proper use of PL and the PL support forums.
...and with this misunderstanding excepted - its all been great.

I now appreciate Bootstrap is new to everyone including support etc
Kindly post more examples of code in context in your online documentation.
Thanks to James for those last links - that's really what I needed.

Please accept my apologies for any offence caused to those involved here, its not in my nature. Just a hard working designer being pushed from all sides. I look forward to continued use of this great product and trust that when we meet again we can all start afresh.

[beardedavenger]

With LESS you really have to throw out the window some parts of normal CSS. Mixins are are like pre-packaged pieces of code. So for example the transition mixin, in css, would need to be written like this

-webkit-transition: .2s ease-in-out;
-moz-trasition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;

Well that's incredibly arduous to be typing out, which is where mixins come into play. So instead of typing all of that junk, we just type

.transition(.2s ease-in-out);

This goes into the compiler, and spits out those 4 lines above automatically. We type LESS, it and processes into CSS.

The cheat sheet has some really basic examples, but others include.

.box-shadow(0 0 1px @black);
.border-radius(5px); or .border-radius(0 0 5px 0);

Multiple shadows
.box-shadow(~"0 0 1px @black, 1px 1px 1px @blue" );

And that's just scraping the surface. Hope this all helps in some way.

[paul_t]

Thanks it does help

As of a couple of days ago - totally new to LESS and Bootstrap

I can see it is a complex beast. Will spend some time on the links suggested above by James.
So before I go off and do that

I'm getting basics of the mixin (whole pile of code into one small definition)
the @ operator that indicated the following is a variable

at some point I saw .transition and @transition and that started the whole confused episode off

without expecting support on this....from what I can see

this is defined in LESS in PageLines already


.transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-ms-transition: @transition;
-o-transition: @transition;
transition: @transition;
}


so

.alpha {
.transition(.2s ease-in-out);

in long hand would be



.alpha {
-webkit-transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-ms-transition: .2s ease-in-out;
-o-transition: .2s ease-in-out;
transition: .2s ease-in-out;
}

next, would it be more correct to define the property to be transitioned


.alpha {
.transition(all .2s ease-in-out);

or


.alpha {
.transition(opacity .2s ease-in-out);




thanks beardedavenger.........off to read up some more.

[Rob]

The topic was marked as resolved.