ප්රදර්ශනය භාවිතා කරමින් - ඔබ බලාපොරොත්තු වූ ස්වාභාවික ආකාරයට වැඩ කිරීමට ඔබට මෙය ලබා ගත හැකිය, නමුත් ජාවාස්ක්‍රිප්ට් භාවිතා කරමින් හෝ වෙනත් අය එක් ටැගයක් සමඟ තවත් ටැගයක් සහිත විසිතුරු උපක්‍රමයක් යෝජනා කර ඇති පරිදි, එය ක්‍රියාත්මක කිරීමට බ්‍රව්සරය තල්ලු කළ යුතුය. අභ්‍යන්තර ටැගය CSS සහ මානයන් තවදුරටත් සංකීර්ණ කරන බැවින් මම එය ගණන් ගන්නේ නැත, එබැවින් මෙන්න ජාවාස්ක්‍රිප්ට් විසඳුම:
https://jsfiddle.net/b9chris/hweyecu4/17/
වැනි කොටුවකින් ආරම්භ කිරීම:
<div id="box" class="hidden">Lorem</div>
සැඟවුණු පෙට්ටියක්.
div.hidden {
display: none;
}
#box {
transition: opacity 1s;
}
අපි අදාළ q / a හි ඇති උපක්‍රමයක් භාවිතා කිරීමට බලාපොරොත්තු වෙමු, බ්‍රව්සරය ක්ෂණිකව තල්ලු කිරීම සඳහා ඕෆ්සෙට් හයිට් පරීක්ෂා කරන්න:
https://stackoverflow.com/a/16575811/176877
පළමුව, ඉහත උපක්රමය විධිමත් කරන පුස්තකාලයක්:
$.fn.noTrnsn = function () {
return this.each(function (i, tag) {
tag.style.transition = 'none';
});
};
$.fn.resumeTrnsn = function () {
return this.each(function (i, tag) {
tag.offsetHeight;
tag.style.transition = null;
});
};
ඊළඟට, අපි එය කොටුවක් හෙළි කිරීමට භාවිතා කර එය මැකී යන්නෙමු:
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden'))
tag.noTrnsn().removeClass('hidden')
.css({ opacity: 0 })
.resumeTrnsn().css({ opacity: 1 });
else
tag.css({ opacity: 0 });
});
මෙය කොටුව ඇතුළට සහ පිටතට මැකී යයි. ඒ නිසා, .noTrnsn()සංක්රමණයන් නිමී, එසේ නම් අපි ඉවත් hiddenවැටුණ වන පන්තිය, displayසිට noneප්රකෘති කිරීමට, block. අපි පසුව අභාවයට යාමට සුදානම් වීම සඳහා පාරාන්ධතාව 0 ලෙස සකසා ඇත්තෙමු. දැන් අපි වේදිකාව සකසා ඇති හෙයින්, අපි සංක්රාන්ති නැවත ක්‍රියාත්මක කරමු.resumeTrnsn() . අවසාන වශයෙන්, පාරාන්ධතාව 1 ට සැකසීමෙන් සංක්‍රාන්තිය ඉවත් කරන්න.
පුස්තකාලය නොමැතිව, ප්රදර්ශනය සඳහා වන වෙනස සහ පාරාන්ධතාවයට වෙනස් වීම යන දෙකම අපට අනවශ්‍ය ප්‍රති .ල ලබා දෙනු ඇත. අපි සරලවම පුස්තකාල ඇමතුම් ඉවත් කළහොත්, අපට කිසිදු සංක්රාන්තියක් නොලැබේ.
ෆේ out ් out ට් සජීවිකරණය අවසානයේ ඉහත කිසිවක් නැවත කිසිවෙකුට දර්ශනය නොවන බව සලකන්න. අපිට රසිකයෙක් වෙන්න පුළුවන්. 0 සිට උස දක්වා වර්ධනය වන සහ වර්ධනය වන එකක් සමඟ අපි එසේ කරමු.
විසිතුරු!
https://jsfiddle.net/b9chris/hweyecu4/22/
#box {
transition: height 1s, opacity 1s;
}
අපි දැන් උස හා පාරාන්ධතාව යන දෙකම සංක්රමණය කරමින් සිටිමු. අපි උස සකසන්නේ නැති බව සලකන්න, එයින් අදහස් වන්නේ එය පෙරනිමිය , auto. සාම්ප්‍රදායිකව මෙය සංක්රමණය කළ නොහැක - ස්වයංක්‍රීයව සිට පික්සල් අගයකට (0 වැනි) මාරු වීමෙන් ඔබට සංක්රාන්තියක් නොලැබේ. අපි පුස්තකාලය හා තවත් එක් පුස්තකාල ක්රමයක් සමඟ වැඩ කරන්නෙමු:
$.fn.wait = function (time, fn) {
if (time)
this.delay(time);
if (!fn)
return this;
var _this = this;
return this.queue(function (n) {
fn.call(_this);
n();
});
};
මෙය jQuery 3.x හි දැන් බැහැර කර ඇති කිසිදු සජීවිකරණ රාමුවක් අවශ්ය නොවී, jQuery හි දැනට පවතින fx / සජීවිකරණ පෝලිම්වලට සහභාගී වීමට අපට ඉඩ සලසන පහසු ක්‍රමයකි. මම jQuery ක්රියා කරන ආකාරය පැහැදිලි කිරීමට යන්නේ නැත, නමුත් පැවසීමට ප්‍රමාණවත්, .queue()සහ.stop() jQuery සපයන ජලනල ජලනල අපගේ සජීවිකරණ එකිනෙකා මතට යාම වැළැක්වීමට උපකාරී වේ.
විනිවිදක පහළ ආචරණය සජීවිකරණය කරමු.
$('#button').on('click', function() {
var tag = $('#box');
if (tag.hasClass('hidden')) {
// Open it
// Measure it
tag.stop().noTrnsn().removeClass('hidden').css({
opacity: 0, height: 'auto'
});
var h = tag.height();
tag.css({ height: 0 }).resumeTrnsn()
// Animate it
.css({ opacity: 1, height: h })
.wait(1000, function() {
tag.css({ height: 'auto' });
});
} else {
// Close it
// Measure it
var h = tag.noTrnsn().height();
tag.stop().css({ height: h })
.resumeTrnsn()
// Animate it
.css({ opacity: 0, height: 0 })
.wait(1000, function() {
tag.addClass('hidden');
});
}
});
මෙම කේතය ආරම්භ වන්නේ #boxඑහි පන්තිය පරීක්ෂා කිරීමෙන් සහ එය දැනට සැඟවී තිබේද යන්න පරීක්ෂා කිරීමෙනි. නමුත් එය wait()එකතු කිරීමෙන් පුස්තකාල ඇමතුම භාවිතා කරයිhidden කරයි, විනිවිදක / ෆේඩ් සජීවිකරණයේ අවසානයේ පන්තිය එය සැබවින්ම සැඟවී ඇත්දැයි සොයා ගැනීමට ඔබ අපේක්ෂා කරයි - ඉහත සරල උදාහරණයට කළ නොහැකි දෙයක්. මෙය සිදුවන්නේ මූලද්රව්යය නැවත නැවතත් ප්රදර්ශනය කිරීමට / සැඟවීමට ඉඩ සලසමිනි, එය පෙර උදාහරණයේ දෝෂයක් විය, මන්ද සැඟවුණු පන්තිය කිසි විටෙකත් ප්‍රතිෂ් .ාපනය නොවූ බැවිනි.
.noTrnsn()සාමාන්යයෙන් සජීවිකරණ සඳහා වේදිකාව සැකසීම සඳහා CSS සහ පන්ති වෙනස්කම් කැඳවනු ලැබීම ඔබට දැක ගත හැකිය , මිනුම් ගැනීම ඇතුළුව, #boxපරිශීලකයාට එය පෙන්වීමකින් තොරව අවසාන උස කුමක් දැයි මැනීම වැනි , ඇමතීමට පෙර.resumeTrnsn() සහ එම සම්පූර්ණ කට්ටලයෙන් සජීවිකරණය කිරීම වැනි. එහි ඉලක්කය CSS අගයන් කරා.
පැරණි පිළිතුර
https://jsfiddle.net/b9chris/hweyecu4/1/
ක්ලික් කිරීමෙන් ඔබට එය සංක්රමණය කළ හැකිය:
function toggleTransition() {
var el = $("div.box1");
if (el.length) {
el[0].className = "box";
el.stop().css({maxWidth: 10000}).animate({maxWidth: 10001}, 2000, function() {
el[0].className = "box hidden";
});
} else {
el = $("div.box");
el[0].className = "box";
el.stop().css({maxWidth: 10001}).animate({maxWidth: 10000}, 50, function() {
el[0].className = "box box1";
});
}
return el;
}
someTag.click(toggleTransition);
CSS යනු ඔබ අනුමාන කරන දෙයයි:
.hidden {
display: none;
}
.box {
width: 100px;
height: 100px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 20px;
top: 20px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: scale(.2);
transform: scale(.2);
-webkit-transition: transform 2s;
transition: transform 2s;
}
.box1{
-webkit-transform: scale(1);
transform: scale(1);
}
ප්රධාන දෙය නම් දර්ශන දේපල තල්ලු කිරීමයි. සැඟවුණු පංතිය ඉවත් කර එම්එස් 50 ක් බලා සිටීමෙන් පසුව එකතු කළ පංතිය හරහා සංක්‍රාන්තිය ආරම්භ කිරීමෙන් අපට එය දිස්වන අතර පසුව අපට අවශ්ය පරිදි පුළුල් වේ. සැඟවුණු අයදුම් කිරීමට පෙර සජීවිකරණය අවසන් වන තෙක් අපි බලා සිටීම හැර, වෙනත් මාර්ගයකට යාම ද ඒ හා සමාන වේ.
සටහන: ධාවන තත්වයන් .animate(maxWidth)වළක්වා ගැනීම සඳහා මම මෙහි අපයෝජනය කරමි setTimeout. setTimeoutඔබ හෝ වෙනත් අයෙකු නොදැන කේතය තෝරාගත් විට සැඟවුණු දෝෂ හඳුන්වා දීමට ඉක්මන් වේ. .animate()පහසුවෙන් මරා දැමිය හැකිය .stop(). සම්මත එෆ්එක්ස් පෝලිමේ 50 එම්එස් හෝ 2000 එම්එස් ප්‍රමාදයක් තැබීමට මම එය භාවිතා කරමි, මෙහි වෙනත් කෝඩර් ගොඩනැඟිලි විසින් සොයා ගැනීමට / විසඳීමට පහසුය.