Transition
-
Vue.js: 트랜지션(transition) 어떻게 사용하는가? :: 마이구미Vue.js 2018. 8. 3. 00:41
이 글은 Vue.js 의 트랜지션(transition) 을 통해 애니메이션을 조작하는 법을 다룬다.Vue.js 는 공식 문서가 정말 이해하기 쉽게 설명하고 있다.그렇기에, 기본적인 내용은 자세히 다루지 않는다.기본적인 지식을 문서를 통해 확인한 후, 이 글을 실제 응용하는 방법을 목적으로 참고하길 바란다.글은 예제를 통해 진행된다.관련 예제 - https://kxk7j2vwr.codesandbox.io/공식 문서 - https://kr.vuejs.org/v2/guide/transitions.html 트랜지션의 일반적인 정의는 DOM 의 삽입, 삭제, 갱신 등에 관련된 효과라고 볼 수 있다.이러한 효과는 페이지 단위에서는 싱글페이지(SPA) 활성화로 인해 페이지 전환에 따른 애니메이션을 많이 경험하거나 구..
-
이미지 롤링 [transition] :: 마이구미HTML, CSS 2016. 8. 1. 16:05
이번 글은 css를 통해 이미지 롤링을 만들어 볼 것이다. 이미지 롤링이란... 본인은 이런 명칭을 사용하고 있는지는 몰랐다. 예를 들어 어느 홈페이지에서 이미지에 마우스를 올렸을 때 다른 이미지로 바뀌는 현상이다. 샘플 페이지 페이지 소스 까서 복붙해서 실습해보면 더더욱 이해하기에 좋다. 페이지 소스보기를 통해 소스를 봤다면, 정말 소스가 간단한 걸 봤을 것이다. css의 transition를 이용하면 해결된다. 일단 html 소스를 보자. span 태그안에 img 태그가 있다. 여기서 기억할 것은, 처음 로딩될 때의 이미지는 img 태그이고, 마우스를 올렸을 때는 span의 background 이미지를 통해 보여지게 된다. 자 기억했다면, css 소스를 보자. /*처음 로딩시*/ .dissolve {..