CSS3 jQuery স্লাইডআপ এবং স্লাইডডাউন সমতুল্য?

Question

আমার অ্যাপ্লিকেশনটি jQuery এর স্লাইডডাউন এবং স্লাইডআপ দিয়ে খারাপ অভিনয় করছে। আমি এটি সমর্থন করে এমন ব্রাউজারগুলিতে একটি CSS3 সমতুল্য ব্যবহার করতে চাইছি।

CSS3 স্থানান্তরগুলি ব্যবহার করে আইটেমটি নীচে বা উপরে স্লাইড display: none;করার display: block;সময় কোনও উপাদান থেকে পরিবর্তন করা কি সম্ভব ?

Comments

আমি মনে করি আপনি প্রদর্শনটি রাখবেন: ব্লক করুন, তবে কেবল পছন্দসই পরিমাণটি 0 থেকে প্রস্থটি সামঞ্জস্য করুন

— ডানহামজজ

Answer 1

আপনি এরকম কিছু করতে পারেন:

#youritem .fade.in {
    animation-name: fadeIn;
}

#youritem .fade.out {
    animation-name: fadeOut;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 1;
        transform: translateY(endYposition);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(startYposition);
    } 
    100% {
        opacity: 0;
        transform: translateY(endYposition);
    }
}

উদাহরণ - স্লাইড এবং বিবর্ণ:

এই স্লাইডগুলি এবং অস্বচ্ছতাটিকে অ্যানিমেট করে - ধারকটির উচ্চতার ভিত্তিতে নয়, শীর্ষে / স্থানাঙ্কের ভিত্তিতে। উদাহরণ দেখুন

উদাহরণ - স্বয়ং-উচ্চতা / জাভাস্ক্রিপ্ট নয়: এখানে একটি লাইভ নমুনা রয়েছে, উচ্চতার প্রয়োজন নেই - স্বয়ংক্রিয় উচ্চতা এবং জাভাস্ক্রিপ্টের সাথে সম্পর্কিত।
উদাহরণ দেখুন

Comments

আপনি কি জেএসফিডেলে একটি ডেমো বানাতে পারেন?

— Vidime Vidas

@ Šime এটির আমার প্রথম দৃষ্টিভঙ্গি থেকে, আমি বলব যে কেবলমাত্র আপনার এলিমেন্ট ক্লাসটি = "বিবর্ণ" দিন এবং যখন আপনি বিবর্ণ চান তখন বাইরে ক্লাস যুক্ত করুন যখন আপনি বিবর্ণ হয়ে যেতে চান।

— lsuarez

@ Šime - আমি আপনার ব্যবহারের জন্য দুটি নমুনা অন্তর্ভুক্ত করেছি

— TNC

ভিসিএনসি - নীচে দেখুন এবং কেবল এই জাতীয় মন্তব্য পোস্ট করার আগে থ্রেডটি অনুসরণ করুন

— TNC

আমি দ্বিতীয় উদাহরণটি (অটো-উচ্চতা / কোনও জাভাস্ক্রিপ্ট নেই) সংশোধন করেছি যাতে কেবল প্রভাবটি পেতে কেবল বেয়ারবোন স্টাইলই ছিল। jsfiddle.net/OlsonDev/nB5Du/251

— ওলসন.দেব

Answer 2

আমি আপনার সমাধানটি পরিবর্তন করেছি, যাতে এটি সমস্ত আধুনিক ব্রাউজারে কাজ করে:

সিএসএস স্নিপেট:

-webkit-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-ms-transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
transition: height 1s ease-in-out;

জেএস স্নিপেট:

    var clone = $('#this').clone()
                .css({'position':'absolute','visibility':'hidden','height':'auto'})
                .addClass('slideClone')
                .appendTo('body');

    var newHeight = $(".slideClone").height();
    $(".slideClone").remove();
    $('#this').css('height',newHeight + 'px');

এখানে সম্পূর্ণ উদাহরণ http://jsfiddle.net/RHPQd/

Comments

এটি কে না তা নিশ্চিত নয় -2, 7 বছর পরে, এখনও একটি কবজির মতো কাজ করে। ভ্যানিলা জেএস এর সাথে আমি এটি পুনরায় তৈরি করি। +1 আমার থেকে.

— হাফিজ তেমুরি

Answer 3

তাই আমি এগিয়ে গিয়ে নিজের প্রশ্নের উত্তর দিয়েছি :)

@ সত্যের উত্তর একটি উপাদানকে একটি নির্দিষ্ট উচ্চতায় রূপান্তরিত করে। এর সাথে সমস্যা হ'ল আমি উপাদানটির উচ্চতা জানি না (এটি ওঠানামা করতে পারে)।

আমি অন্যান্য সমাধানগুলি পেয়েছি যার চারপাশে সর্বাধিক উচ্চতাটি রূপান্তর হিসাবে ব্যবহৃত হয়েছিল তবে এটি আমার জন্য খুব ঝাঁকুনির অ্যানিমেশন তৈরি করেছে।

আমার নীচের সমাধানটি কেবল ওয়েবকিট ব্রাউজারগুলিতে কাজ করে।

যদিও খাঁটি সিএসএস নয়, এর মধ্যে উচ্চতাটি স্থানান্তর করা জড়িত, যা কিছু জেএস দ্বারা নির্ধারিত হয়।

$('#click-me').click(function() {
  var height = $("#this").height();
  if (height > 0) {
    $('#this').css('height', '0');
  } else {
    $("#this").css({
      'position': 'absolute',
      'visibility': 'hidden',
      'height': 'auto'
    });
    var newHeight = $("#this").height();
    $("#this").css({
      'position': 'static',
      'visibility': 'visible',
      'height': '0'
    });
    $('#this').css('height', newHeight + 'px');
  }
});

#this {
  width: 500px;
  height: 0;
  max-height: 9999px;
  overflow: hidden;
  background: #BBBBBB;
  -webkit-transition: height 1s ease-in-out;
}

#click-me {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<p id="click-me">click me</p>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
<div>always shows</div>

জেএসফিডেলে দেখুন

Comments

হ্যাঁ, আমার নীচের কোডটির উচ্চতার প্রয়োজন নেই কারণ এটি y- স্থানাঙ্ক ব্যবহার করে। তবে আপনি উল্লেখ করেননি যে উচ্চতা নির্ভরতার সাথে আপনার কোনও কিছুর প্রয়োজন ছিল :) আপনি সর্বদা একটি মার্জিন ট্রানজিশন করতে পারেন ইত্যাদি ইত্যাদি But তবে এটি মনে হয় আপনি যা খুঁজছেন তা আছে, না?

— টিএনসি

@ ট্রু আপনি কি মনে করেন যে আপনি মার্জিন ট্রানজিশন বলতে কী বোঝাতে চেয়েছেন?

— মাইক

অবস্থানের জন্য নমুনা যুক্ত হয়েছে, মার্জিনিং যুক্ত করবে

— TNC

মার্জিন / জাভাসক্রিপ্টের উদাহরণও যুক্ত করা হয়নি

— টিএনসি

Answer 4

কেন আধুনিক ব্রাউজারগুলির সিএসএস ট্রানজিশনের সুবিধা নেবেন না এবং আরও CSS এবং কম jquery ব্যবহার করে জিনিসগুলিকে সহজ এবং দ্রুত তৈরি করুন

উপরে এবং নীচে স্লাইডিংয়ের জন্য কোড এখানে

বাম থেকে ডান দিকে স্লাইডিংয়ের কোড এখানে

একইভাবে আমরা ট্রান্সফর্ম-অরিজিন এবং ট্রান্সফর্ম: স্কেলএক্স (0) বা ট্রান্সফর্ম: স্কেলওয়াই (0) যথাযথভাবে পরিবর্তন করে স্লাইডিংটিকে উপর থেকে নীচে বা ডানে বামে পরিবর্তন করতে পারি।

Comments

আমি জানি যে এই উত্তরগুলি 2014 সালে দেওয়া হয়েছিল তবে আমি এই উত্তরটি ব্যবহার করার প্রস্তাব দিতে পারছি না যদি আপনি নীচের উপাদানগুলিকে নীচে বা উপরে

— চাপতে চান তবে পিতামাত্রে ধারক

Answer 5

কাজের জন্য উচ্চতার ট্রানজিশনগুলি পাওয়া কিছুটা জটিল হতে পারে মূলত কারণ আপনাকে এনিমেট করার জন্য উচ্চতাটি জানতে হবে। এনিমেটেড হওয়ার জন্য উপাদানটিতে প্যাডিং দিয়ে এটি আরও জটিল।

আমি এখানে যা এলাম:

এই জাতীয় শৈলী ব্যবহার করুন:

    .slideup, .slidedown {
        max-height: 0;            
        overflow-y: hidden;
        -webkit-transition: max-height 0.8s ease-in-out;
        -moz-transition: max-height 0.8s ease-in-out;
        -o-transition: max-height 0.8s ease-in-out;
        transition: max-height 0.8s ease-in-out;
    }
    .slidedown {            
        max-height: 60px ;  // fixed width                  
    }

আপনার সামগ্রীটিকে অন্য ধারক করে এমনভাবে আবদ্ধ করুন যাতে আপনি যে ধারকটি স্লাইড করছেন তার কোনও প্যাডিং / মার্জিন / সীমানা না থাকে:

  <div id="Slider" class="slideup">
    <!-- content has to be wrapped so that the padding and
            margins don't effect the transition's height -->
    <div id="Actual">
            Hello World Text
        </div>
  </div>

তারপরে সিএসএস ক্লাসগুলি ট্রিগার করতে কিছু স্ক্রিপ্ট (বা বাঁধার ফ্রেমওয়ার্কগুলিতে ডিক্লেয়ারিটাল মার্কআপ) ব্যবহার করুন।

  $("#Trigger").click(function () {
    $("#Slider").toggleClass("slidedown slideup");
  });

উদাহরণ এখানে: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p= পূর্বরূপ

স্থির আকারের সামগ্রীর জন্য এটি সূক্ষ্ম কাজ করে। আরও সাধারণ জলাবদ্ধতার জন্য আপনি যখন রূপান্তরটি সক্রিয় হয় তখন উপাদানটির আকার নির্ধারণের জন্য কোড ব্যবহার করতে পারেন। নীচে একটি jQuery প্লাগ-ইন রয়েছে যা কেবল এটি করে:

$.fn.slideUpTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.css("max-height", "0");
        $el.addClass("height-transition-hidden");
    });
};

$.fn.slideDownTransition = function() {
    return this.each(function() {
        var $el = $(this);
        $el.removeClass("height-transition-hidden");

        // temporarily make visible to get the size
        $el.css("max-height", "none");
        var height = $el.outerHeight();

        // reset to 0 then animate with small delay
        $el.css("max-height", "0");

        setTimeout(function() {
            $el.css({
                "max-height": height
            });
        }, 1);
    });
};

যা এই জাতীয়ভাবে ট্রিগার হতে পারে:

"(" # ট্রিগার ") ক্লিক করুন (ফাংশন () {

    if ($("#SlideWrapper").hasClass("height-transition-hidden"))
        $("#SlideWrapper").slideDownTransition();
    else
        $("#SlideWrapper").slideUpTransition();
});

এই মত মার্কআপ বিরুদ্ধে:

<style>
#Actual {
    background: silver;
    color: White;
    padding: 20px;
}

.height-transition {
    -webkit-transition: max-height 0.5s ease-in-out;
    -moz-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    overflow-y: hidden;            
}
.height-transition-hidden {            
    max-height: 0;            
}
</style>
<div id="SlideWrapper" class="height-transition height-transition-hidden">
    <!-- content has to be wrapped so that the padding and
        margins don't effect the transition's height -->
    <div id="Actual">
     Your actual content to slide down goes here.
    </div>
</div>

উদাহরণ: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p= পূর্বরূপ

আপনি আরও বিশদে আগ্রহী হলে আমি সম্প্রতি একটি ব্লগ পোস্টে এটি লিখেছিলাম:

http://weblog.west-wind.com/posts/2014/Feb/22/Using-CSS- Transitions-to-SlideUp-and-lideDown

Comments

এটি আমার হিসাবে সর্বাধিক মার্জিত সমাধান। এবং প্রয়োজনে jQuery সহজেই মুছে ফেলা যায়। ভ্যানিলা জেএস-এ কোনও একটি ক্লাস টগল করতে পারে:document.getElementById("Slider").classList.toggle("slidedown");

— হাইপার

Answer 6

আমি jQuery ট্রানজিট প্লাগিন ব্যবহার করার পরামর্শ দিচ্ছি যা CSS3 রূপান্তর বৈশিষ্ট্য ব্যবহার করে যা মোবাইল ডিভাইসগুলিতে দুর্দান্ত কাজ করে যে বেশিরভাগই দেশীয় চেহারা এবং অনুভূতি দেওয়ার জন্য হার্ডওয়্যার ত্বরণকে সমর্থন করে।

জেএস ফিডল উদাহরণ

এইচটিএমএল:

<div class="moveMe">
    <button class="moveUp">Move Me Up</button>
    <button class="moveDown">Move Me Down</button>
    <button class="setUp">Set Me Up</button>
    <button class="setDown">Set Me Down</button>
 </div>

জাভাস্ক্রিপ্ট:

$(".moveUp").on("click", function() {
    $(".moveMe").transition({ y: '-=5' });
});

$(".moveDown").on("click", function() {
    $(".moveMe").transition({ y: '+=5' });
});

$(".setUp").on("click", function() {
    $(".moveMe").transition({ y: '0px' });
});

$(".setDown").on("click", function() {
    $(".moveMe").transition({ y: '200px' });
});

Comments

এটি কি আপনাকে অটো ব্যবহার করে কোনও উপাদানের প্রাকৃতিক উচ্চতায় স্থানান্তর করতে সক্ষম করে? যেমন । $ ( "। moveMe") রূপান্তরটি ({উচ্চতা: 'অটো "})

— monkeyboy

আমি আশা করি তারা এই প্লাগইনটি দিয়ে পদ্ধতি slideUp()এবং slideDown()পদ্ধতিগুলিকে ওভাররাইড করে । এটি সত্যিই দুর্দান্ত

— লাগবে

এটি দুর্দান্ত বিটিডাব্লু। এই উত্তর যুক্ত করার জন্য ধন্যবাদ!

— স্টিভ

Answer 7

আট ফ্যাম, কিছু গবেষণা এবং পরীক্ষা-নিরীক্ষার পরে, আমি মনে করি যে জিনিসটির উচ্চতা এটাই সবচেয়ে ভাল উপায় 0pxএবং এটি একটি সঠিক উচ্চতায় স্থানান্তরিত করা। আপনি জাভাস্ক্রিপ্ট সহ সঠিক উচ্চতা পাবেন। জাভাস্ক্রিপ্ট অ্যানিমেটিং করছে না, এটি কেবল উচ্চতার মান পরিবর্তন করছে। এটি পরীক্ষা করুন:

function setInfoHeight() {
  $(window).on('load resize', function() {
    $('.info').each(function () {
      var current = $(this);
      var closed = $(this).height() == 0;
      current.show().height('auto').attr('h', current.height() );
      current.height(closed ? '0' : current.height());
    });
  });

পৃষ্ঠাটি যখনই লোড হয় বা পুনরায় আকার দেওয়া হয়, শ্রেণি সহ উপাদানটি infoতার hবৈশিষ্ট্য আপডেট হবে। তারপরে আপনার style="height: __"পূর্বের সেট hমানটিতে সেট করতে একটি বোতাম ট্রিগার করতে পারে ।

function moreInformation() {
  $('.icon-container').click(function() {
    var info = $(this).closest('.dish-header').next('.info'); // Just the one info
    var icon = $(this).children('.info-btn'); // Select the logo

    // Stop any ongoing animation loops. Without this, you could click button 10
    // times real fast, and watch an animation of the info showing and closing
    // for a few seconds after
    icon.stop();
    info.stop();

    // Flip icon and hide/show info
    icon.toggleClass('flip');

    // Metnod 1, animation handled by JS
    // info.slideToggle('slow');

    // Method 2, animation handled by CSS, use with setInfoheight function
    info.toggleClass('active').height(icon.is('.flip') ? info.attr('h') : '0');

  });
};

এখানে infoক্লাসের জন্য স্টাইলিং রয়েছে ।

.info {
  display: inline-block;
  height: 0px;
  line-height: 1.5em;
  overflow: hidden;
  padding: 0 1em;
  transition: height 0.6s, padding 0.6s;
  &.active {
    border-bottom: $thin-line;
    padding: 1em;
  }
}

আমি আমার প্রজেক্টের একটিতে এটি ব্যবহার করেছি যাতে শ্রেণীর নাম নির্দিষ্ট থাকে। আপনি চাইলে এগুলি পরিবর্তন করতে পারেন।

স্টাইলিং ক্রস ব্রাউজার সমর্থিত নাও হতে পারে। ক্রোমে সূক্ষ্ম কাজ করে।

নীচে এই কোডটির জন্য লাইভ উদাহরণ দেওয়া আছে। ?অ্যানিমেশন শুরু করতে আইকনে ক্লিক করুন

কোডপেন

Answer 8

জাভাস্ক্রিপ্ট ছাড়াই ভেরিয়েন্ট। কেবল সিএসএস।

সিএসএস:

.toggle_block {
    border: 1px solid #ccc;
    text-align: left;
    background: #fff;
    overflow: hidden;
}
.toggle_block .toggle_flag {
    display: block;
    width: 1px;
    height: 1px;
    position: absolute;
    z-index: 0;
    left: -1000px;
}
.toggle_block .toggle_key {
    font-size: 16px;
    padding: 10px;
    cursor: pointer;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content {
    padding: 0 10px;
    overflow: hidden;
    max-height: 0;
    -webkit-transition: all 300ms ease;
       -moz-transition: all 300ms ease;
        -ms-transition: all 300ms ease;
         -o-transition: all 300ms ease;
            transition: all 300ms ease;
}
.toggle_block .content .toggle_close {
    cursor: pointer;
    font-size: 12px;
}
.toggle_block .toggle_flag:checked ~ .toggle_key {
    background: #dfd;
}
.toggle_block .toggle_flag:checked ~ .content {
    max-height: 1000px;
    padding: 10px 10px;
}

এইচটিএমএল:

<div class="toggle_block">
    <input type="checkbox" id="toggle_1" class="toggle_flag">
    <label for="toggle_1" class="toggle_key">clicker</label>
    <div class="content">
        Text 1<br>
        Text 2<br>
        <label for="toggle_1" class="toggle_close">close</label>
    </div>
</div>

পরবর্তী ব্লকের জন্য কেবল এইচটিএমএলে আইডি এবং বৈশিষ্ট্যগুলির জন্য পরিবর্তন করুন।

Answer 9

আপনি সহজভাবে সিএসএস 3 এর সাথে একটি স্লাইডআপ স্লাইডাউন তৈরি করতে পারবেন না কেন আমি জাভাস্ক্রিপ্ট ফ্যালব্যাক এবং কলব্যাকের সাহায্যে জেনসটি স্ক্রিপ্টটিকে একটি প্লাগইনে পরিণত করেছি।

এইভাবে যদি আপনার কাছে একটি আধুনিক ব্রাউজার থাকে আপনি css3 csstransition ব্যবহার করতে পারেন। যদি আপনার ব্রাউজারটি সমর্থন না করে তবে পুরানো ফ্যাশনযুক্ত স্লাইডআপ স্লাইডডাউনটি নিখুঁতভাবে ব্যবহার করুন।

 /* css */
.csstransitions .mosneslide {
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
  -ms-transition: height .4s ease-in-out;
  -o-transition: height .4s ease-in-out;
  transition: height .4s ease-in-out;
  max-height: 9999px;
  overflow: hidden;
  height: 0;
}

প্লাগইন

(function ($) {
$.fn.mosne_slide = function (
    options) {
    // set default option values
    defaults = {
        delay: 750,
        before: function () {}, // before  callback
        after: function () {} // after callback;
    }
    // Extend default settings
    var settings = $.extend({},
        defaults, options);
    return this.each(function () {
        var $this = $(this);
        //on after
        settings.before.apply(
            $this);
        var height = $this.height();
        var width = $this.width();
        if (Modernizr.csstransitions) {
            // modern browsers
            if (height > 0) {
                $this.css(
                    'height',
                    '0')
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                var clone =
                    $this.clone()
                    .css({
                        'position': 'absolute',
                        'visibility': 'hidden',
                        'height': 'auto',
                        'width': width
                    })
                    .addClass(
                        'mosne_slideClone'
                )
                    .appendTo(
                        'body'
                );
                var newHeight =
                    $(
                        ".mosne_slideClone"
                )
                    .height();
                $(
                    ".mosne_slideClone"
                )
                    .remove();
                $this.css(
                    'height',
                    newHeight +
                    'px')
                    .removeClass(
                        "mosne_hidden"
                );
            }
        } else {
            //fallback
            if ($this.is(
                ":visible"
            )) {
                $this.slideUp()
                    .addClass(
                        "mosne_hidden"
                );
            } else {
                $this.hide()
                    .slideDown()
                    .removeClass(
                        "mosne_hidden"
                );
            }
        }
        //on after
        setTimeout(function () {
            settings.after
                .apply(
                    $this
            );
        }, settings.delay);
    });
}
})(jQuery);;

এটি কিভাবে ব্যবহার করতে

/* jQuery */
$(".mosneslide").mosne_slide({
    delay:400,
    before:function(){console.log("start");},
    after:function(){console.log("done");}
});

আপনি এখানে একটি ডেমো পৃষ্ঠা পেতে পারেন http://www.mosne.it/playground/mosne_slide_up_down/

Comments

এটি কোনও উত্তর নয়, উত্তরে একটি লিঙ্কের চেয়ে আরও বেশি কিছু রয়েছে।

— সর্বোচ্চ

এটি প্রশ্নের উত্তর দেয় না। কোনও লেখকের কাছ থেকে সমালোচনা বা স্পষ্টতার জন্য অনুরোধ জানাতে, তাদের পোস্টের নীচে একটি মন্তব্য দিন - আপনি সর্বদা আপনার নিজের পোস্টে মন্তব্য করতে পারেন, এবং আপনার যথেষ্ট সুনামের পরে আপনি কোনও পোস্টে মন্তব্য করতে সক্ষম হবেন ।

— চতুর্থ

যদিও এই লিঙ্কটি প্রশ্নের উত্তর দিতে পারে, উত্তরের প্রয়োজনীয় অংশগুলি এখানে অন্তর্ভুক্ত করা এবং রেফারেন্সের জন্য লিঙ্কটি সরবরাহ করা ভাল। লিঙ্কযুক্ত উত্তর পরিবর্তিত হলে লিঙ্কযুক্ত উত্তরগুলি অবৈধ হতে পারে।

— সাশকেলো

Answer 10

    try this for slide up slide down with animation 
give your **height

        @keyframes slide_up{
            from{
                min-height: 0;
                height: 0px;
                opacity: 0;
            }
            to{
                height: 560px;
                opacity: 1;
            }
        }

        @keyframes slide_down{
            from{
                height: 560px;
                opacity: 1;
            }
            to{
                min-height: 0;
                height: 0px;
                opacity: 0;
            } 
        }