jQuery slideUp 및 slideDown에 해당하는 CSS3?

Question 1

내 응용 프로그램이 jQuery의 slideDown 및 slideUp에서 제대로 수행되지 않습니다. 나는 그것을 지원하는 브라우저에서 CSS3와 동등한 것을 사용하려고합니다.

CSS3 전환을 사용 하여 항목을 아래 또는 위로 슬라이드하면서 요소를에서 display: none;로 변경할 display: block;수 있습니까?

Question 2

다음과 같이 할 수 있습니다.

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

예-슬라이드 및 페이드 :

컨테이너의 높이가 아니라 상단 / 좌표를 기준으로 불투명도를 슬라이드하고 애니메이션합니다. 예보기

예-자동 높이 / 자바 스크립트 없음 : 다음은 높이가 필요하지 않은 라이브 샘플입니다. 자동 높이를 처리하고 자바 스크립트가 없습니다.
예보기

Question 3

모든 최신 브라우저에서 작동하도록 솔루션을 변경했습니다.

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;

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

다음은 전체 예입니다. http://jsfiddle.net/RHPQd/

Question 4

그래서 나는 계속해서 내 질문에 답했습니다. :)

@ True의 대답은 요소를 특정 높이로 변환하는 것으로 간주되었습니다. 이것의 문제는 요소의 높이를 모른다는 것입니다 (변할 수 있음).

최대 높이를 전환으로 사용하는 다른 솔루션을 찾았지만 이것은 저에게 매우 불안정한 애니메이션을 생성했습니다.

아래 내 솔루션은 WebKit 브라우저에서만 작동합니다.

순전히 CSS는 아니지만 일부 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>

스 니펫 확장

JSFiddle에서보기

Question 5

최신 브라우저 CSS 전환을 활용하고 더 많은 CSS와 더 적은 jquery를 사용하여 더 간단하고 빠르게 작업하지 않는 이유

다음은 위아래로 슬라이딩하는 코드입니다.

다음은 왼쪽에서 오른쪽으로 슬라이드하는 코드입니다.

마찬가지로 transform-origin 및 transform : scaleX (0) 또는 transform : scaleY (0)을 적절히 변경하여 위에서 아래로 또는 오른쪽에서 왼쪽으로 슬라이딩을 변경할 수 있습니다.

Question 6

높이 전환이 작동하도록하는 것은 주로 애니메이션 할 높이를 알아야하기 때문에 약간 까다로울 수 있습니다. 이는 애니메이션 할 요소의 패딩으로 인해 더욱 복잡해집니다.

내가 생각해 낸 것은 다음과 같습니다.

다음과 같은 스타일을 사용하십시오.

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

그런 다음 일부 스크립트 (또는 바인딩 프레임 워크의 선언적 마크 업)를 사용하여 CSS 클래스를 트리거합니다.

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

예 : http://plnkr.co/edit/uhChl94nLhrWCYVhRBUF?p=preview

이것은 고정 된 크기의 콘텐츠에 대해 잘 작동합니다. 보다 일반적인 솔루션의 경우 코드를 사용하여 전환이 활성화 될 때 요소의 크기를 파악할 수 있습니다. 다음은이를 수행하는 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);
    });
};

다음과 같이 트리거 될 수 있습니다.

$ ( "# Trigger"). click (function () {

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

더 자세한 내용에 관심이 있다면 최근 블로그 게시물에이 글을 썼습니다.

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

Question 7

CSS3 transform 속성을 사용하는 jQuery Transit Plugin 을 사용하는 것이 좋습니다 . CSS3 transform 속성은 대부분이 기본 모양과 느낌을 제공하기 위해 하드웨어 가속을 지원하기 때문에 모바일 장치에서 잘 작동합니다.

JS 바이올린 예

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>

자바 스크립트 :

$(".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, 몇 가지 연구와 실험을 마친 후, 가장 좋은 방법은 물체의 높이를 0px으로 설정하고 정확한 높이로 전환하는 것입니다. JavaScript로 정확한 높이를 얻을 수 있습니다. JavaScript는 애니메이션을 수행하는 것이 아니라 높이 값을 변경하는 것입니다. 확인해 봐:

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

내 프로젝트 중 하나에서 이것을 사용했기 때문에 클래스 이름이 구체적입니다. 원하는대로 변경할 수 있습니다.

스타일이 브라우저 간 지원되지 않을 수 있습니다. 크롬에서 잘 작동합니다.

아래는이 코드의 실제 예제입니다. ?아이콘을 클릭 하면 애니메이션이 시작됩니다.

CodePen

Question 9

자바 스크립트없는 변형. 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>

다음 블록의 경우 html의 ID 및 FOR 속성 만 변경하십시오.

Question 10

css3로 슬라이드 업 슬라이드 다운을 쉽게 만들 수 없습니다. 그래서 JensT 스크립트를 자바 스크립트 폴백 및 콜백을 사용하여 플러그인으로 바꿨습니다.

이런 식으로 최신 brwowser가있는 경우 css3 csstransition을 사용할 수 있습니다. 브라우저가 우아하게 지원하지 않으면 구식 slideUp slideDown을 사용하십시오.

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

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