VueJs - Изменить цвет div с переходом - PullRequest
Новая
       5

VueJs - Изменить цвет div с переходом

0 голосов
/ 15 сентября 2018

У меня есть строка заголовка и кнопка.Я могу изменить цвет при щелчке, но я хочу, чтобы изменение цвета было плавным переходом или эффектом при нажатии.Можно ли сделать это с помощью vue?

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
        }
    }
})

Ответы [ 2 ]

0 голосов
/ 15 сентября 2018

Вы можете сделать это, просто добавив свойство 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>
0 голосов
/ 15 сентября 2018

Фоновые градиенты не могут быть анимированы, но вы можете взломать их, затеняя в другом элементе (псевдоэлементе ::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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...