CSS3 tương đương với jQuery slideUp và slideDown?

Question 1

Ứng dụng của tôi hoạt động kém với slideDown và slideUp của jQuery. Tôi đang tìm cách sử dụng CSS3 tương đương trong các trình duyệt hỗ trợ nó.

Có thể sử dụng chuyển tiếp CSS3 để thay đổi một phần tử từ đó display: none;sang display: block;trong khi trượt mục xuống hoặc lên không?

Question 2

Bạn có thể làm điều gì đó như sau:

#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);
    }
}

Ví dụ - Trượt và Làm mờ:

Điều này trình chiếu và tạo hoạt ảnh cho độ mờ - không dựa trên chiều cao của vùng chứa mà dựa trên đỉnh / tọa độ. Xem ví dụ

Ví dụ - Chiều cao tự động / Không có Javascript: Đây là mẫu trực tiếp, không cần chiều cao - xử lý chiều cao tự động và không có javascript.
Xem ví dụ

Question 3

Tôi đã thay đổi giải pháp của bạn để nó hoạt động trên tất cả các trình duyệt hiện đại:

đoạn mã css:

-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;

đoạn mã js:

    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');

đây là ví dụ đầy đủ http://jsfiddle.net/RHPQd/

Question 4

Vì vậy, tôi đã tiếp tục và trả lời câu hỏi của chính mình :)

Câu trả lời của @ True coi việc biến đổi một phần tử lên một độ cao cụ thể. Vấn đề với điều này là tôi không biết chiều cao của phần tử (nó có thể dao động).

Tôi đã tìm thấy các giải pháp khác xung quanh sử dụng chiều cao tối đa làm quá trình chuyển đổi nhưng điều này tạo ra hoạt ảnh rất giật cho tôi.

Giải pháp của tôi bên dưới chỉ hoạt động trong trình duyệt WebKit.

Mặc dù không hoàn toàn là CSS, nhưng nó liên quan đến việc chuyển đổi chiều cao, được xác định bởi một số JS.

$('#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>

Mở rộng đoạn mã

Xem trên JSFiddle

Question 5

tại sao không tận dụng quá trình chuyển đổi css của trình duyệt hiện đại và làm cho mọi thứ trở nên đơn giản và nhanh chóng hơn bằng cách sử dụng nhiều css hơn và ít jquery hơn

Đây là mã để trượt lên và xuống

Đây là mã để trượt từ trái sang phải

Tương tự, chúng ta có thể thay đổi độ trượt từ trên xuống dưới hoặc từ phải sang trái bằng cách thay đổi điểm gốc và phép biến đổi: scaleX (0) hoặc biến đổi: scaleY (0) một cách thích hợp.

Question 6

Để chuyển đổi chiều cao hoạt động có thể hơi phức tạp, chủ yếu là vì bạn phải biết chiều cao để tạo hiệu ứng. Điều này còn phức tạp hơn nữa bằng cách đệm vào phần tử được làm động.

Đây là những gì tôi nghĩ ra:

sử dụng một phong cách như thế này:

    .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                  
    }

Gói nội dung của bạn vào một vùng chứa khác để vùng chứa bạn đang trượt không có phần đệm / lề / đường viền:

  <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>

Sau đó, sử dụng một số tập lệnh (hoặc đánh dấu khai báo trong các khung liên kết) để kích hoạt các lớp CSS.

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

Ví dụ ở đây: http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

Điều này hoạt động tốt cho nội dung có kích thước cố định. Để có độ phân giải chung chung hơn, bạn có thể sử dụng mã để tìm ra kích thước của phần tử khi quá trình chuyển đổi được kích hoạt. Sau đây là một trình cắm thêm jQuery thực hiện điều đó:

$.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);
    });
};

có thể được kích hoạt như thế này:

$ ("# Trigger"). Nhấp vào (function () {

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

chống lại đánh dấu như thế này:

<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>

Ví dụ: http://plnkr.co/edit/Wpcgjs3FS4ryrhQUAOcU?p=preview

Tôi đã viết điều này gần đây trong một bài đăng trên blog nếu bạn muốn biết thêm chi tiết:

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

Question 7

Tôi khuyên bạn nên sử dụng Plugin jQuery Transit sử dụng thuộc tính chuyển đổi CSS3, hoạt động tốt trên các thiết bị di động do hầu hết đều hỗ trợ tăng tốc phần cứng để mang lại giao diện gốc.

Ví dụ về JS Fiddle

HTML:

<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>

Javascript:

$(".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' });
});

Question 8

Aight fam, sau một số nghiên cứu và thử nghiệm, tôi nghĩ cách tiếp cận tốt nhất là để độ cao của vật ở mức 0pxvà để nó chuyển sang độ cao chính xác. Bạn có được chiều cao chính xác với JavaScript. JavaScript không tạo hoạt ảnh, nó chỉ thay đổi giá trị chiều cao. Kiểm tra nó:

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());
    });
  });

Bất cứ khi nào trang tải hoặc được thay đổi kích thước, phần tử có lớp infosẽ được hcập nhật thuộc tính của nó . Sau đó, bạn có thể có một nút kích hoạt style="height: __"để đặt nó thành hgiá trị đã đặt trước đó .

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');

  });
};

Đây là kiểu cho infolớp học.

.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;
  }
}

Tôi đã sử dụng điều này trên một trong các dự án của mình để tên lớp cụ thể. Bạn có thể thay đổi chúng theo cách bạn muốn.

Kiểu có thể không được hỗ trợ trên nhiều trình duyệt. Hoạt động tốt trong chrome.

Dưới đây là ví dụ trực tiếp cho mã này. Chỉ cần nhấp vào ?biểu tượng để bắt đầu hoạt ảnh

CodePen

Question 9

Biến thể không có JavaScript. Chỉ CSS.

CSS:

.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;
}

HTML:

<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>

Đối với khối tiếp theo, chỉ thay đổi thuộc tính ID và FOR trong html.

Question 10

bạn không thể làm cho slideup trượt xuống một cách dễ dàng với css3 đó là lý do tại sao tôi đã biến JensT script thành một plugin với javascript dự phòng và gọi lại.

theo cách này nếu bạn có một brwowser hiện đại, bạn có thể sử dụng css3 csstransition. nếu trình duyệt của bạn không hỗ trợ, hãy sử dụng slideUp slideDown kiểu cũ.

 /* 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;
}

plugin

(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);;

Làm thế nào để sử dụng nó

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

bạn có thể tìm thấy trang demo tại đây http://www.mosne.it/playground/mosne_slide_up_down/

Question 11

    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;
            } 
        }