БЛОГ НА HUSL


Не скрывается активный блок

Автор вопроса: Young

У меня есть 7 блоков , при нажатии на 4 блок , у меня добавляется активный класс на блок, градиент , в котором есть css свойство background-position, оно как раз мне все и портит, при нажатии на первый блок , у меня скрываются все блоки кроме него(то есть , кроме первого), а если у меня будет активный 4 блок и я нажму на первый , у меня 4-тый блок не скроется, хотел как-то сделать проверку , что если 4-тый блок активен и я нажимаю на первый у меня присваивается к 4-тому блоку фолс, но оно так не работает, если у меня будет активен 4-тый блок , я нажму на первый, у меня скроются все блоки кроме первого и 4-того, но когда я нажму на 1 блок еще раз, фолс применится к 4-тому блоку , как правильно написать условие для первой кнопки ?

const app = new Vue({
  el: '#app',
  data() {
    return {
      hideButton: true,
      items: [
        {id: 0, text: '1111'},
        {id: 1, text: '2222'},
        {id: 2, text: '3333'},
        {id: 3, activeButton: false,  text: '4444'},
        {id: 4,  text: '5555'},
        {id: 5,  text: '6666'},
        {id: 6, text: '7777'},
      ],
    }
  },
  methods: {
    checkBlock(key) {
      if (key === 3) {
        this.items[3].activeButton = !this.items[3].activeButton;
        console.log(this.items[3].activeButton)
      } else if (key === 0){
        this.items[3].activeButton = false
        this.hideButton = !this.hideButton
      }
      }
    }
 });

 
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  width: 92.77778vh;
}

.buttonsall {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 1.85185vh;
  padding: 0.41667vh 0.37037vh 0.37037vh 0.23148vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.74074vh;
  height: 2.77778vh;
}

.buttonsall.active {
    -webkit-animation: gradient 30s linear infinite;
              animation: gradient 30s linear infinite;
    background: linear-gradient(90deg, rgba(160, 26, 122, 0.65) 0%, rgba(90, 7, 56, 0.65) 0.5%, rgba(232, 210, 154, 0.65) 5%, rgba(92, 14, 56, 0.65) 10%, rgba(0, 56, 255, 0.65) 10.5%, rgba(255, 184, 0, 0.65) 15%, rgba(91, 102, 76, 0.65) 20%, rgba(37, 41, 54, 0.65) 20.5%, rgba(98, 95, 89, 0.65) 25%, rgba(0, 56, 255, 0.65) 30%, rgba(2, 3, 6, 0.65) 30.5%, rgba(255, 184, 0, 0.65) 35%, rgba(0, 56, 255, 0.65) 40%, rgba(112, 149, 107, 0.65) 40.5%, rgba(27, 208, 18, 0.65) 45%, rgba(0, 56, 255, 0.65) 50%, rgba(141, 151, 190, 0.65) 50.5%, rgba(255, 184, 0, 0.65) 55%, rgba(0, 56, 255, 0.65) 60%, rgba(0, 56, 255, 0.65) 60.5%, rgba(255, 184, 0, 0.65) 65%, rgba(0, 56, 255, 0.65) 70%, rgba(0, 56, 255, 0.65) 70.5%, rgba(255, 184, 0, 0.65) 75%, rgba(0, 56, 255, 0.65) 80%, rgba(0, 56, 255, 0.65) 80.5%, rgba(255, 184, 0, 0.65) 85%, rgba(0, 56, 255, 0.65) 90%, rgba(0, 56, 255, 0.65) 90.5%, rgba(255, 184, 0, 0.65) 95%, rgba(0, 56, 255, 0.65) 100%);
    background-size: 2000% 2000%;
 }

.buttonsall.opacity {
  opacity: 0.5;
}

.fade-enter-active {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.fade-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.3, -0.05, 0.7, -0.5);
  transition: all 0.3s cubic-bezier(0.3, -0.05, 0.7, -0.5);
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.fade-leave-to, .fade-enter {
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <transition-group tag="ul" name="fade" class="buttons">
               <li class="buttonsall"
               v-if="hideButton || item.id === 0" 
               v-for="( item, index ) in items" 
               :class="{'active':item.id=== 3 && item.activeButton, 'opacity':item.id=== 0 && !hideButton}"
               @click="checkBlock(item.id)"
               :key="item.id">
                  <img class="iconbuttons" :src="item.img">
                  <div class="buttons__text">{{ item.text }}</div>
               </li>
            </transition-group>
</div>


Источник

Ответы (1 шт):

Автор решения: Daniil Loban

В ходе исследований выяснилось, что с условиями все в порядке, это анимация держит кнопку, т.е. если подождать некоторое время (подозреваю что 30 секунд) кнопка 4444 скроется сама.

Поведение немного странное, единственный хак который я нашел для решения задачи это подчищать элемент вручную, и разумеется это костыль:

      if (!this.hideButton){
        document.querySelector('#id3').classList.remove(
          'active')
      }

Но, возможно, без него не обойтись в случаях с анимацией, тема нуждается в дальнейшем изучении.

const app = new Vue({
  el: '#app',
  data() {
    return {
      hideButton: true,
      items: [
        {id: 0, text: '1111'},
        {id: 1, text: '2222'},
        {id: 2, text: '3333'},
        {id: 3, activeButton: false,  text: '4444'},
        {id: 4,  text: '5555'},
        {id: 5,  text: '6666'},
        {id: 6, text: '7777'},
      ],
    }
  },
  methods: {
      checkBlock(key) {
        if (key === 3) {
          this.items[3].activeButton = !this.items[3].activeButton;
        } else if (key === 0){
          this.items[3].activeButton = false
          this.hideButton = !this.hideButton
          if (!this.hideButton){
            document.querySelector('#id3').classList.remove(
              'active')
          }
        }
      }
    }
 });
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  width: 92.77778vh;
}

.buttonsall {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin-right: 1.85185vh;
  padding: 0.41667vh 0.37037vh 0.37037vh 0.23148vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 0.74074vh;
  height: 2.77778vh;
}


.buttonsall.active { 
    -webkit-animation: gradient 30s linear infinite;
              animation: gradient 30s linear infinite; 
    background: linear-gradient(90deg, rgba(160, 26, 122, 0.65) 0%, rgba(90, 7, 56, 0.65) 0.5%, rgba(232, 210, 154, 0.65) 5%, rgba(92, 14, 56, 0.65) 10%, rgba(0, 56, 255, 0.65) 10.5%, rgba(255, 184, 0, 0.65) 15%, rgba(91, 102, 76, 0.65) 20%, rgba(37, 41, 54, 0.65) 20.5%, rgba(98, 95, 89, 0.65) 25%, rgba(0, 56, 255, 0.65) 30%, rgba(2, 3, 6, 0.65) 30.5%, rgba(255, 184, 0, 0.65) 35%, rgba(0, 56, 255, 0.65) 40%, rgba(112, 149, 107, 0.65) 40.5%, rgba(27, 208, 18, 0.65) 45%, rgba(0, 56, 255, 0.65) 50%, rgba(141, 151, 190, 0.65) 50.5%, rgba(255, 184, 0, 0.65) 55%, rgba(0, 56, 255, 0.65) 60%, rgba(0, 56, 255, 0.65) 60.5%, rgba(255, 184, 0, 0.65) 65%, rgba(0, 56, 255, 0.65) 70%, rgba(0, 56, 255, 0.65) 70.5%, rgba(255, 184, 0, 0.65) 75%, rgba(0, 56, 255, 0.65) 80%, rgba(0, 56, 255, 0.65) 80.5%, rgba(255, 184, 0, 0.65) 85%, rgba(0, 56, 255, 0.65) 90%, rgba(0, 56, 255, 0.65) 90.5%, rgba(255, 184, 0, 0.65) 95%, rgba(0, 56, 255, 0.65) 100%);
    background-size: 2000% 2000%;
}

.buttonsall.opacity {
  opacity: 0.5;
}

.fade-enter-active {
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
}

.fade-leave-active {
  -webkit-transition: all 0.3s cubic-bezier(0.3, -0.05, 0.7, -0.5);
  transition: all 0.3s cubic-bezier(0.3, -0.05, 0.7, -0.5);
}

@-webkit-keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@keyframes gradient {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.fade-leave-to, .fade-enter {
  -webkit-transform: translateY(15px);
          transform: translateY(15px);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <transition-group tag="ul" name="fade" class="buttons">
               <li class="buttonsall"
               v-if="hideButton || item.id === 0" 
               v-for="( item, index ) in items" 
               :class="{'active': item.id=== 3 && item.activeButton , 'opacity':item.id=== 0 && !hideButton}"
               @click="checkBlock(item.id)"
               :id="'id' + item.id"
               :key="item.id">
                  <img class="iconbuttons" :src="item.img">
                  <div class="buttons__text">{{ item.text }}</div>
               </li>
            </transition-group>
</div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.