search

kimsQ / rc

Makes front-end mobile web & apps development faster and easier. It's function extended version of Ratchet
https://kimsq.github.io/rc
MIT License
0 stars 6 forks source link

컨포넌트 활성화(active) 시 display:bock 인라인방식 적용요청 #7

Closed gitaeks closed 8 years ago

gitaeks commented 8 years ago

@kieregh 님, 비활성화된 컨포넌트가 화면 밖에 존재할 때는 상관없으나, zoom(scale) 이펙트와 같이 비활성상태의 컨포넌트가 화면 가시권에 존재할 경우, 화면내에 자리잡는 현상을 막기 위해 아래와 같이 요청합니다.

CSS에서 적용할 경우, 에니메이션 이펙트가 불완전하게 작동하여 인라인으로 적용함

최초

인라인 스타일 없음,

활성

style="display:block"

비활성

style="display:none"

적용대상

kieregh commented 8 years ago

아래 커밋과 같이 업데이트되었습니다. (modal,popup 에 적용) https://github.com/kimsQ/rc/commit/b2038e088e43c0e59c740952d4e02cddac0132f0

popover 는 처음부터 display:block/none 처리가 되어 있었습니다.

gitaeks commented 8 years ago

확인했습니다. 적용해 보니, 컨포넌트를 호출할때 css 이펙트 효과가 모두 사라졌습니다. ratchet.js 원본 적용 예제를 보면 css 이펙트 효과가 유지되고 있는데요. 아마 style="display:block/none"를 적용하는 타이밍과 관련되 보입니다. 아래 예제를 참고해 주세요.

데모

http://kimsq.github.io/rc/examples/component/popover/popover-static-link.html

ratchet.js 원본 적용

http://kimsq.github.io/rc/examples/component/popover/popover-static-link-2.html

kieregh commented 8 years ago

어떤 css 이펙트를 말씀하시는건가요? 어떤 div class 인지 정확히 알려주세요...

아래 데모 보면.... http://kimsq.github.io/rc/examples/component/popover/popover-static-link.html

1) 활성(호출)시 <div id="myPopover" class="popover visible" display="block">

2) 비활성(닫기)시 <div id="myPopover" class="popover" display="none">

으로 되는데....정상 아닌가요? ratchet.js 원본 적용 데모와 같게 나오는데요......

한 가지 차이점은..... ratchet.js 원본 적용 데모에는 최초

에 class rb-bottom 이 있다는 점입니다.