• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

제이쿼리 코드를 > 자바스크립트로 작성시

20.11.20 16:19 작성 조회수 76

0

안녕하세요 선생님 바쁘실텐데 죄송합니다.

저는 자바스크립트 공부를 위하여

선생님이  제이쿼리로 적어주신 코드들을

자바스크립트로 변환하며 공부 하고 있습니다.

하지만 아래와 같이 변수 fgCon에 classList.add('active');

를 하였지만 아무런 애니메이션 효과도 나타나지 않고

콘솔 검사시 html 내부에는 이미 active 클래스가 삽입 되어있습니다.

어떠한 문제때문에 그런걸까요??

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-compatible" content="chrome=1,IE=edge">
<title>스터디</title>
<link rel="stylesheet" type="text/css" href="../../library/css/common.css">
<script type="text/javascript" src="../../library/js/jquery.1.12.4.js"></script>
</head>
<style type="text/css">

.tit_area {padding:100px 0 0 0;}
.tit_area .f_content {position: relative; width:70%; margin:0 auto;}
.tit_area .f_content .tit {position:relative; z-index:20; left:50px; font-size:80px; line-height:1.2; opacity:1;}
.tit_area .f_content .txt {position:relative; z-index:20; left:80px; font-size:50px; opacity:1;}
.tit_area .f_content .img {position: relative; transform:translateY(50px);  transition:4s .2s cubic-bezier(0.3, 1.01, 0.51, 1.04);}
.tit_area .f_content.active .img {transform:translateY(-10px);}
.tit_area .f_content .img:after {position:absolute; left:0; top:0; z-index:10; width:100%; height:100%; content:""; background-color: #fff; transition:2s .3s cubic-bezier(0.3, 1.01, 0.51, 1.04);}
.tit_area .f_content.active .img:after {width: 0;}
.tit_area .f_content .img img {width:100%;}
</style>
<body>
	<div class="wrap">
		<section class="tit_area">
			<article class="f_content">
				<h2 class="tit">
					GGANG CODING
				</h2>
				<p class="txt">애니메이션 가속도 처리방법</p>

				<figure class="img">
					<img src="../images/4.jpg">
				</figure>
			</article>
		</section>
	</div>
<script type="text/javascript">
    var fgCon = document.querySelector('.f_content');
    function addClass(){
        fgCon.classList.add('active');
    };
    
    function init(){//초기화
        addClass();
    };
    init();
</script>
</body>
</html>









답변 1

답변을 작성해보세요.

0

안녕하세요 박무웅님 :)

문서의 모든 요소가 로드된후에 애니메이션이 실행되도록 고쳐보세요

    onload = function(){

    init();

    }

온로드를 사용하면 모든요소 즉 이미지까지 로드된 후에 애니메이션 실행됩니다.

모든 요소가 로드되지 않았을때 애니메이션이 실행되서 애니메이션이 실행되지 않는것 처럼 보이건데요

온로드를 사용해 모든 요소가 로드된 후에 애니메이션이 실행되도록 하거나

setTimeout함수를 사용해 약간의 딜레이를 주어도 처리 가능합니다.

그럼 또다른 궁금증이 생길때 문의주세요 :)