반응형
VueJs - 전환에 따라 div 색상 변경
머리글자랑 단추가 있어요클릭 시 색상을 변경할 수 있지만, 원활한 전환이나 클릭 시 효과로 색상을 변경했으면 합니다.Vue.js로 할 수 있나요?
HTML 코드
<html>
<head>
<title>My App</title>
</head>
<body>
<div id="app">
<div class="head" :class="{ headnew : change }"></div>
<button @click="changeIt">Change me!</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
</script>
</html>
CSS 코드
.head {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
}
.headnew {
background: red;
height: 60px;
margin-bottom: 15px;
}
JS 코드
var app = new Vue({
el: "#app",
data: {
change : false
},
methods: {
changeIt() {
this.change = true
}
}
})
배경 그라데이션은 애니메이션화할 수 없지만 다른 요소로 페이딩하여 해킹할 수 있습니다(::before유사 요소)가 배경과 겹칩니다.
다음은 코드에 쉽게 적응할 수 있는 일반적인 HTML+CSS의 예입니다.
.box {
width: 100px;
height: 100px;
background: linear-gradient(to top, blue, yellow);
position: relative;
z-index: 0;
}
.box::before {
content: '';
position: absolute;
z-index: -1;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: red;
opacity: 0;
transition: opacity 0.2s linear;
}
.box:hover::before {
opacity: 1;
}<div class="box">Some text</div>간단하게 할 수 있는 것은,transition소유물.head다음과 같습니다.
.head {
...
transition: background 6s ease;
}
다음의 동작하고 있는 솔루션을 확인합니다.
var app = new Vue({
el: "#app",
data: {
change : false
},
methods: {
changeIt() {
this.change = true
}
}
}).head {
background: linear-gradient(-90deg, #84CF6A, #16C0B0);
height: 60px;
margin-bottom: 15px;
transition: background 6s ease;
}
.headnew {
background: red;
height: 60px;
margin-bottom: 15px;
} <div id="app">
<div class="head" :class="{ headnew : change }"></div>
<button @click="changeIt">Change me!</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>언급URL : https://stackoverflow.com/questions/52342491/vuejs-change-div-color-with-transition
반응형
'source' 카테고리의 다른 글
| 구성 요소 태그 내부는 알 수 없지만 구성 요소 태그 외부는 알 수 없는 "알 수 없는 사용자 지정 요소" 경고 (0) | 2022.08.28 |
|---|---|
| vuejs 템플릿 내에서 스타일 태그를 사용하고 데이터 모델에서 업데이트 (0) | 2022.08.28 |
| Vue.js에서 커스텀 조건부 렌더 디렉티브를 만듭니다. (0) | 2022.08.28 |
| Vue 2.0 SSR 오류 페이지 (0) | 2022.08.27 |
| 다른 모듈의 getter를 사용하여 Vuex 상태를 설정하는 방법 (0) | 2022.08.27 |