Skip to content

Commit 451389f

Browse files
hikalkanhikalkan
committed
Upgraded durandal transitions.
1 parent 5567412 commit 451389f

File tree

3 files changed

+83
-27
lines changed

3 files changed

+83
-27
lines changed

‎Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/MySpaProject.WebSpaDurandal.csproj

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,7 +263,6 @@
263263
<Content Include="Scripts\durandal\plugins\serializer.js" />
264264
<Content Include="Scripts\durandal\plugins\widget.js" />
265265
<Content Include="Scripts\durandal\system.js" />
266-
<Content Include="Scripts\durandal\transitions\entrance.js" />
267266
<Content Include="App\Main\main.less" />
268267
<Content Include="App\Main\views\layout.cshtml" />
269268
<Content Include="App\Main\views\home.cshtml" />
@@ -287,6 +286,7 @@
287286
<Content Include="fonts\fontawesome-webfont.eot" />
288287
<Content Include="fonts\FontAwesome.otf" />
289288
<None Include="Scripts\jquery-2.1.1.intellisense.js" />
289+
<Content Include="Scripts\durandal\transitions\entrance.js" />
290290
<Content Include="Scripts\durandal\viewEngine.js" />
291291
<Content Include="Scripts\durandal\viewLocator.js" />
292292
<Content Include="Scripts\jquery-2.1.1.js" />

‎Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/Scripts/durandal/transitions/entrance.js

Lines changed: 81 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* Durandal 2.0.1 Copyright (c) 2012 Blue Spire Consulting, Inc. All Rights Reserved.
2+
* Durandal 2.1.0 Copyright (c) 2012 Blue Spire Consulting, Inc. All Rights Reserved.
33
* Available via the MIT license.
44
* see: http://durandaljs.com or https://github.com/BlueSpire/Durandal for details.
55
*/
@@ -13,17 +13,52 @@
1313
define(['durandal/system', 'durandal/composition', 'jquery'], function(system, composition, $) {
1414
var fadeOutDuration = 100;
1515
var endValues = {
16-
marginRight: 0,
17-
marginLeft: 0,
16+
left: '0px',
1817
opacity: 1
1918
};
2019
var clearValues = {
21-
marginLeft: '',
22-
marginRight: '',
23-
opacity: '',
24-
display: ''
20+
left: '',
21+
top: '',
22+
right: '',
23+
bottom:'',
24+
position:'',
25+
opacity: ''
2526
};
2627

28+
var isIE = navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/MSIE/);
29+
30+
var animation = false,
31+
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
32+
elm = document.createElement('div');
33+
34+
if(elm.style.animationName !== undefined) {
35+
animation = true;
36+
}
37+
38+
if(!animation) {
39+
for(var i = 0; i < domPrefixes.length; i++) {
40+
if(elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
41+
animation = true;
42+
break;
43+
}
44+
}
45+
}
46+
47+
if(animation) {
48+
if(isIE){
49+
system.log('Using CSS3/jQuery mixed animations.');
50+
}else{
51+
system.log('Using CSS3 animations.');
52+
}
53+
} else {
54+
system.log('Using jQuery animations.');
55+
}
56+
57+
function removeAnimationClasses(ele, fadeOnly){
58+
ele.classList.remove(fadeOnly ? 'entrance-in-fade' : 'entrance-in');
59+
ele.classList.remove('entrance-out');
60+
}
61+
2762
/**
2863
* @class EntranceModule
2964
* @constructor
@@ -44,34 +79,55 @@ define(['durandal/system', 'durandal/composition', 'jquery'], function(system, c
4479
$(context.activeView).fadeOut(fadeOutDuration, endTransition);
4580
} else {
4681
var duration = context.duration || 500;
82+
var $child = $(context.child);
4783
var fadeOnly = !!context.fadeOnly;
84+
var startValues = {
85+
display: 'block',
86+
opacity: 0,
87+
position: 'absolute',
88+
left: fadeOnly || animation ? '0px' : '20px',
89+
right: 0,
90+
top: 0,
91+
bottom: 0
92+
};
4893

4994
function startTransition() {
5095
scrollIfNeeded();
5196
context.triggerAttach();
5297

53-
var startValues = {
54-
marginLeft: fadeOnly ? '0' : '20px',
55-
marginRight: fadeOnly ? '0' : '-20px',
56-
opacity: 0,
57-
display: 'block'
58-
};
59-
60-
var $child = $(context.child);
61-
62-
$child.css(startValues);
63-
$child.animate(endValues, {
64-
duration: duration,
65-
easing: 'swing',
66-
always: function () {
98+
if (animation) {
99+
removeAnimationClasses(context.child, fadeOnly);
100+
context.child.classList.add(fadeOnly ? 'entrance-in-fade' : 'entrance-in');
101+
setTimeout(function () {
102+
removeAnimationClasses(context.child, fadeOnly);
103+
if(context.activeView){
104+
removeAnimationClasses(context.activeView, fadeOnly);
105+
}
67106
$child.css(clearValues);
68107
endTransition();
69-
}
70-
});
108+
}, duration);
109+
} else {
110+
$child.animate(endValues, {
111+
duration: duration,
112+
easing: 'swing',
113+
always: function() {
114+
$child.css(clearValues);
115+
endTransition();
116+
}
117+
});
118+
}
71119
}
72120

73-
if (context.activeView) {
74-
$(context.activeView).fadeOut({ duration: fadeOutDuration, always: startTransition });
121+
$child.css(startValues);
122+
123+
if(context.activeView) {
124+
if (animation && !isIE) {
125+
removeAnimationClasses(context.activeView, fadeOnly);
126+
context.activeView.classList.add('entrance-out');
127+
setTimeout(startTransition, fadeOutDuration);
128+
} else {
129+
$(context.activeView).fadeOut({ duration: fadeOutDuration, always: startTransition });
130+
}
75131
} else {
76132
startTransition();
77133
}

‎Templates/All-In-One-Template/MySpaProject/MySpaProject.WebSpaDurandal/packages.config

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<package id="Castle.Windsor" version="3.3.0" targetFramework="net451" />
1515
<package id="Castle.Windsor-log4net" version="3.3.0" targetFramework="net451" />
1616
<package id="Durandal" version="2.1.0" targetFramework="net451" />
17-
<package id="Durandal.Transitions" version="2.0.1" targetFramework="net451" />
17+
<package id="Durandal.Transitions" version="2.1.0" targetFramework="net451" />
1818
<package id="EntityFramework" version="6.1.1" targetFramework="net451" />
1919
<package id="FontAwesome" version="4.2.0" targetFramework="net451" />
2020
<package id="jQuery" version="2.1.1" targetFramework="net451" />

0 commit comments

Comments
 (0)