Skip to content
Permalink
Browse files

Transitions: Added transitions plugin base

  • Loading branch information...
sviens
sviens committed Mar 25, 2014
1 parent c243bb9 commit 472129d471888e2e0e82a8c595658e30e6171aaf
@@ -0,0 +1,73 @@
/*
* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
*/
%wb-fade-opacity-0 {
opacity: 0;
}
%wb-fade-opacity-1 {
opacity: 1;
}
%wb-slide-left {
transform: translate(-25%, 0);
}
%wb-slide-right {
transform: translate(25%, 0);
}
%transition-300 {
transition: all 300ms;
}
%transition-500 {
transition: all 500ms;
}
%transition-1000 {
transition: all 1000ms;
}
%transition-1500 {
transition: all 1500ms;
}
%transition-2000 {
transition: all 2000ms;
}

/* Fade */
.wb-fade-in-test {
@extend %wb-fade-opacity-0;
@extend %transition-300;
&:hover {
@extend %wb-fade-opacity-1;
}
&:focus {
@extend %wb-fade-opacity-1;
}
}
.wb-fade-out-test {
@extend %wb-fade-opacity-1;
@extend %transition-500;
&:hover {
@extend %wb-fade-opacity-0;
}
&:focus {
@extend %wb-fade-opacity-0;
}
}

/* Slide */
.wb-slide-left-test {
@extend %transition-300;
&:hover {
@extend %wb-slide-left;
}
&:focus {
@extend %wb-slide-left;
}
}
.wb-slide-right-test {
@extend %transition-500;
&:hover {
@extend %wb-slide-right;
}
&:focus {
@extend %wb-slide-right;
}
}
@@ -0,0 +1,43 @@
---
{
"title": "Transitions",
"language": "en",
"category": "Plugin",
"description": "CSS-based transitions",
"tag": "transitions",
"altLangPrefix": "transitions",
"css": "demo/transitions"
}
---
<div class="alert alert-info">
<p><strong>Purpose:</strong> create a transition class with optional states.</p>
</div>

<h2>Fade</h2>
<div class="">
<p>Hover mouse over space below to trigger fade-in (300ms)</p>
<img src="http://placehold.it/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
</div>

<div class="">
<p>Hover mouse over space below to trigger fade-out (500ms)</p>
<img src="http://placehold.it/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
</div>

<br>
<br>

<h2>Slide</h2>
<div class="">
<p>Hover mouse over space below to trigger slide-left (300ms)</p>
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</div>
<br>
<div class="">
<p>Hover mouse over space below to trigger slide-right (500ms)</p>
<img src="http://placehold.it/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</div>
@@ -0,0 +1,45 @@
---
{
"title": "Transitions",
"language": "fr",
"category": "Plugiciel",
"description": "Transitions CSS",
"tag": "transitions",
"altLangPrefix": "transitions",
"css": "demo/transitions"
}
---
<div lang="en">
<div class="alert alert-info">
<p><strong>Purpose:</strong> create a transition class with optional states.</p>
</div>

<h2>Fade</h2>
<div class="">
<p>Hover mouse over space below to trigger fade-in (300ms)</p>
<img src="http://placehold.it/350x150&amp;text=fade-in+test" class="wb-fade-in-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=fade-in+test" class="" alt="placeholder" />
</div>

<div class="">
<p>Hover mouse over space below to trigger fade-out (500ms)</p>
<img src="http://placehold.it/350x150&amp;text=fade-out+test" class="wb-fade-out-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=fade-out+test" class="" alt="placeholder" />
</div>

<br>
<br>

<h2>Slide</h2>
<div class="">
<p>Hover mouse over space below to trigger slide-left (300ms)</p>
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="wb-slide-left-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</div>
<br>
<div class="">
<p>Hover mouse over space below to trigger slide-right (500ms)</p>
<img src="http://placehold.it/350x150&amp;text=slide-right+test" class="wb-slide-right-test" alt="placeholder" tabindex="0" />
<img src="http://placehold.it/350x150&amp;text=slide-left+test" class="" alt="placeholder" />
</div>
</div>

0 comments on commit 472129d

Please sign in to comment.
You can’t perform that action at this time.