허용 효과

묘사

안녕하세요,
나는 새로운 내용을 표시하는 것과 같은 특수 효과를 사용할 수 있다면 매우 좋을 것이라고 생각한다.

토론 #1

은 매우 구체적인 응용 프로그램이라고 생각하지만, 갈고리나 다른 것을 추가해서 당신이 일을 돕는 것을 반대하지 않습니다.좋은 생각이에요.금방 준비됐으면 좋겠어요.

토론 #2

네, 저는 리셋 함수가 쉽게 실현될 수 있다고 생각합니다.

토론 #셋

+1
입방체의 한쪽에 있는 모든 내용을 다시 불러올 것입니다.새 내용을 불러오면 입방체가 오른쪽으로 뒤집힙니다.사용자가 뒤로 를 클릭하면 입방체가 다시 왼쪽으로 이동합니다.보기 좋을 것 같습니다:)

토론 #4

토론 #5

및 pjax.start 이벤트를 사용할 수 없습니까?pjax.end 여러분, 옵션이 있는 성공 함수를 제공할 수 있습니다.만약 당신이 1달러를 제공하지 않는다면noop(및 빈 함수)이 사용됩니다.

토론 #6

@robertodecurnex 불행하게도 이 때 데이터가 DOM에 삽입되었습니다=/
https://github.com/defunkt/jquery-pjax/blob/master/jquery.pjax.js#L104

토론 #7

아이고, 네 말이 맞다.따라서 특정한 효과는 큰 의미가 없다. 모든 사람이 그들의 사이트와 일치하는 과도 효과가 필요하기 때문에 우리는 선택할 수 있는 과도 연결, 예를 들어 다른 옵션과 함께 제공할 수 있는 과도 함수를 고려할 수 있다.

토론 #8

또는 DOM 삽입 방법을 사용자 정의할 수 있습니까?

토론 #9

현재 start 연결 중입니다.pjax와 end.pjax (또는 더 좋은 것: 페이지 변경 & 페이지 업데이트 - pjax rails gem을 사용하고 있기 때문에) 클릭할 때 () 꺼지고 완성할 때 꺼집니다 (). 그러나 이것은 내가 원하는 것처럼 멋있지 않습니다.
첫 번째는, 내가 실제적으로 링크를 눌렀을 때, 리셋이 호출될 때까지, 특히 두 번째 창에서 터미널을 열고 웹 서버/rails 활동을 보여줄 때, 내가 링크/단추를 눌렀을 때, 요청이 먼저 발송되고 시작하는 것 같다.pjax가 호출되었습니다. 저는 개인적으로 pjax를 가장 싫어합니다. 요청을 터치하는 데 시간이 오래 걸릴 수 있기 때문입니다. 이것은 클라이언트 -> 서버 연결에 달려 있습니다. 제가 진정으로 꺼질 때까지.나는 기분이 매우 나쁘다.
나는 일부 전역점이 클릭(start.pjax)과finish(end.pjax)에 연결되어 효과가 이렇게 보이기를 희망한다:)
p,s:github 어딘가에 투표/투표 버튼이 없나요?내 생각에는 이렇다.)

토론 #10

나는 트라프니가 언급한 것과 완전히 같은 일을 하려고 노력하고 있다. PJax를 보내기 전에 나는 나의 목표인 DIV에서 물러나고 완성한 후에 물러나려고 한다.
$("#페이지").bind('start.pjax',function(){$('#pages').fadeOut(1000)}).bind('end.pjax',function(){$('#pages').fadeIn(1000)});
내 링크를 클릭하면 #pages DIV가 즉시 사라지고 새 내용이 예상대로 사라집니다.

토론 #11

나도 이 결과를 보고 매우 흥미를 느낀다.

토론 #12

은 세 가지 이벤트만 처리할 수 있습니다. 요청 전, 요청 후, 새로운 html을 삽입한 후입니다.나는 이것이 대부분의 효과에 있어서 이미 충분하다고 생각한다.

토론 #13

은 클릭할 때 기본적인 페이드를 하고 새로운 부분을 삽입할 때 페이드를 하고 싶습니다.
bump:)

토론 #14

숨겨진'staging'div를 사용하여 새로운 내용을 불러옵니다.

토론 #15

은 애니메이션을 시작하고 숨겨진 내용을 정확한 위치에 삽입하고 애니메이션을 끝냅니다.이러한 방법으로 페이지의 여러 개별 영역에 컨텐트를 로드할 수도 있습니다.pjax.end@gigablah 이것은 매우 재미있는 해결 방안으로 들리지만, 그것은 여전히 이렇다.) 나는 상위권이 있기를 바란다
API 솔루션:)

토론 #16

Trapni, 여기도 마찬가지입니다.나는 또한 두 개의div를 사용하여 그것들 사이에서 신구 내용을 전환함으로써 이 문제를 해결해야 한다.아주 못생겼어요.싫어.

토론 #17

나는 이 점을 해낼 수 있다는 것에 매우 흥미를 느낀다.

토론 #18

이 사실상 이 일을 조사해야 한다.github 트리 슬라이더는 실제로 pjax: (애니메이션이 있기 때문에) 를 사용하지 않습니다.
나는 자신의 삽입 함수를 제공하면 충분하다고 생각한다.

토론 #19

@josh, 당신의 생각을 고려하면, 이것은 아주 좋은 해결 방안이 될 수 있다고 생각합니다. 표준을 쉽게 덮어쓰는 방법에 대한 간결한 예시인 '삽입' 을 제공합니다.다행이네요.
그러나 상위 창업 보드 개발자들은 이에 대해 어떤 견해를 가지고 있는가?

토론 #20

+1.
언제 완성할지 기대!

토론 #21

전망 효과

토론 #22

은 현재 이 점을 실현할 다른 방법이 있습니까?

토론 #23

이 점을 어떻게 하는지에 대한 코드 예시가 있습니까?

토론 #24

페이드-> 페이드 효과를 적용하려고 노력했습니다.

jQuery(document).on('click', '.js-pjax', function(click) {

    click.preventDefault();

    var target = jQuery(this).attr('href';

    jQuery('#page').fadeOut('normal', function() {

        $.pjax({
            url: target),
            container: '#page'
        });

    });
});

이렇게 하는 목적은 내용 영역을 숨기고 페이지 내용을 그 안에 불러오는 것이지만 내용 영역이 사라진 후에만
그리고 pjax:success에서 제가 내용을 보여드렸어요.

jQuery(document).on('pjax:success', function() {
    jQuery('#page').fadeIn('normal');
});

나는 이것이 네가 요구한 것인지 아닌지는 확실하지 않지만, 나는 이것이 누군가에게 도움이 될 것이라고 생각한다.만약 이 부분에 개선이 있다면 공유해 주십시오.

토론 #25

@johnsardine 좋은 생각입니다. 코드를 조금 수정했습니다. 덤핑을 시작하고 동시에 요청을 해서 시간을 절약할 수 있습니다.

$('a').pjax('#main', {
    fragment: '#main',
    timeout: 5000
})
.live('click', function () {
    $('#main').fadeOut('normal');//change to your own speed
    //$('.loading').fadeIn('fast'); //if you need loading
});
$(document).on('pjax:success', function () {
    $('#main').stop().fadeIn('normal');//change to your own speed
    //$('.loading').fadeOut('fast');
});  

토론 #26

CSS는 다음과 같이 매우 쉽습니다.

$('#main').on('pjax:start', function() {
  $(this).addClass('loading')
})

$('#main').on('pjax:end', function() {
  $(this).removeClass('loading')
})

#main {
  opacity: 1;
  transition: opacity 0.20s linear;
}

#main.loading {
  opacity: 0.5;
}

토론 #27

저는 제 방식대로 코드를 작성했습니다. 현재의 방법을 사용하면 내용의 마운트 속도가 매우 빠르기 때문에 (이것은 좋습니다) 내용이 페이드 처리 과정에서 변경되었습니다. 따라서 만약에 누군가가 페이드, 마운트, 페이드를 필요로 한다면 목표div가 페이드한 후에 내용을 변경할 것입니다.제가 제안한 코드

토론 #28

부터 시작할 수 있습니다. 이 문제에 대한 해결 방안을 제공하는 지점을 만들었습니다.너는https://github.com/shogun70/jquery-pjax/tree/transition그리고http://playground.meekostuff.net/jquery-pjax/demo/index.html
이 솔루션에는 페이지 전환의 가장 짧은 기간인

토론 #29

옵션이 추가되었습니다.새 컨텐트는 만료되기 전에 삽입되지 않으므로 페이지 넘기 애니메이션을 완료할 수 있습니다.
새 내용이 준비되지 않으면 용기에 duration을 터치하여 지시기를 기다리는 것을 허용합니다.
@johnsardine, @layerssss에서 이렇게 사용할 수 있습니다

var duration = 400
$('a.pjax').pjax('#main', { duration: duration })
$('#main')
  .on('pjax:start', function() { $(this).fadeOut(duration) })
  .on('pjax:waiting', function() {
      $(this)
        .html('<div style="width: 100%; text-align: center;"><img src="waiting.gif" /></div>')
        .show()
    })
  .on('pjax:end',   function() { $(this).fadeIn(duration) })

이것은 정말 개념의 증명이기 때문에 그것을 사고의 음식으로 사용하거나 아무것도 쓰지 않는다.
기본 시간 초과를 5000밀리초로 늘렸기 때문에, 완전한 시간 초과를 고려하면 복구를 원할 수도 있습니다.pjax:waiting 잘했어. 한번 해볼게. 연락하게.감사합니다.

토론 #30

감사합니다 @shogun70!이것은 일종의 즐거움이다.

토론 #31

헤이@shogun70, 이름 모를 주간에 통합할 수 있는 요청을 넣을 수 있습니까?

토론 #32

+1
그것을 메인 트렁크 안에 넣으면 매우 좋다.@shogun70에서 온 홍보

토론 #33

+1, @shogun70에서 온 홍보

토론 #34

+1 @shogun70에서 온 홍보

토론 #35

+1 - 지금까지 가장 좋은 해결 방안:-)

토론 #36

자 @shogun70.이것은 정말 폐기된 트렁크

토론 #37

에 넣어야 합니다. 감사합니다 @matthewferry.좋아해 주셔서 반갑습니다.
내가 이 부분을 만든 것은 단지 이 개념을 보여주기 위해서이다. 그것은 매우 거칠고, 어떠한 테스트도 없고, 심지어github 슬라이더 효과에도 불리하다.
이것은 사실 심사숙고한 해결 방안이 아니라 문제 영역에 대한 탐색이다.

토론 #38

헤헤@shogun70, 이것은 무심코 테스트하지 않은 과정일 수도 있지만, 무엇보다도 좋지 않다.나는 누군가가 이 문제를 해결하려고 시도하는 것을 매우 기쁘게 생각한다.

토론 #39

@shogun70의 또 다른 +1.이것은 매우 흔히 볼 수 있는 문제로, 이 해결 방안이나 다른 해결 방안은 확실히 주요 부분에 놓아야 한다.