카카오톡 iOS 웹뷰 TransitionEnd 이벤트

InAppBrowser(카톡/카스 인앱브라우져)
1

안녕하세요.

프론트엔드 개발자입니다.

다름이 아니라 transitionend 이벤트를 활용한 웹을 개발하였는데, iOS 카카오톡 웹뷰에서는 해당 이벤트가 발생되지 않는 것을 확인했습니다.

[
  'webkitTransitionEnd',
  'otransitionend',
  'oTransitionEnd',
  'msTransitionEnd',
  'transitionend'
]

제가 이용하는 브라우저별 transitionend 이벤트 이름인데 혹시 제가 빼먹은 것이 있는걸까요?

저의 짧은 지식으로는 웹뷰도 결국에 사파리 브라우저로 알고 있는데 해당 이벤트가 발생하지 않는게 이상합니다.

감사합니다.

2

웹뷰가 사파리 브라우져와 같지 않습니다. 사파리에서 지원하는 스펙 중 일부는 웹뷰에서 사용할 수 없습니다.
좀 더 테스트해봐야 알겠습니다만 transitionEnd event는 웹뷰에서 지원하지 않는 것 같군요.

1개의 좋아요
3

그럼 다른 앱들이 사용하는 웹뷰와도 차이가 있는건가요 ?

현재 페이스북이나 라인 등 다른 앱에서는 그런이슈가 없는데 카카오톡 웹뷰에서만 해당 문제가 발생하고 있습니다.

1개의 좋아요
4

페이스북과 라인에서 어떤 웹뷰를 사용하는지 알 수 없지만 기본적으로는 iOS의 UIWebView를 쓰고 있는걸로 알고 있어요.
(최신 웹뷰를 쓰면 사파리와 같은 기능을 사용할 수 있지만 하위호환성에 이슈가 있을 겁니다.)
웹뷰를 customizing 할 수 있는 부분이 있는데 페북과 라인은 거기서 추가 구현한 것인지
아니면 UiWebView 에서 원래 지원하고 있는데 카톡웹뷰에서만 동작하지 않는지는 확인이 필요하겠네요.
간단한 재현 소스 첨부 가능하실까요?

1개의 좋아요
5 

import forEach from 'lodash/forEach';
import __CONST__ from 'const';
/**
__CONST__.TRANSITION_END_EVENT_NAMES

=> 

[
    'webkitTransitionEnd',
    'otransitionend',
    'oTransitionEnd',
    'msTransitionEnd',
    'transitionend'
]
*/

export const transitionHook = (el, callback, delay = 0) => {
  function cb(e) {
    forEach(__CONST__.TRANSITION_END_EVENT_NAMES, eventName => {
      if (el) {
        el.removeEventListener(eventName, cb, false);
      }
    });
    callback();
  }

  forEach(__CONST__.TRANSITION_END_EVENT_NAMES, eventName => {
    if (el) {
      el.addEventListener(eventName, cb, false);
    }
  });
}

감사합니다.

6

공유해주신 코드로는 테스를 해볼 수가 없었기에 따로 코드를 만들어서 이벤트가 발생하는지 따로 테스트를 해봤는데요.
카카오톡 웹뷰에서도 transitionEnd 잘 발생하는걸 확인했습니다.
아마 다른쪽의 문제인 것 같은데 첨부해주신 코드가 일부분이고 ES6 로 짜신 코드의 post processing도 어떻게 되는지를 몰라 더 말씀드리기가 힘드네요.

아래의 데모는 transitionEnd 를 쓰는 다른 데모입니다. 참고가 되실지 모르겠네요.
http://osvaldas.info/examples/detecting-css-animation-transition-end-with-javascript/

2개의 좋아요