0

Как реализовать плавную анимация при клике (

data() {
      return {
        show: false,
        };
        },
        methods: [
toggleShow(){
        this.show = !this.show;
      },
      }
.red {
  color: red;
}

.item {
  opacity: 0;
  height: 0;
  transition: opacity 0.3s, height 0.3s 0.1s;
}

.active .item {
  opacity: 1;
  height: 30px;
  transition: opacity 0.3s 0.1s, height 0.3s;
}
<Button @click="toggleShow()">Show</Button>
    <div v-if="show" :class="{'active':show}">
      <p class="red item">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, accusantium!
      </p>
    </div>

появления блока)

2
  • 1
    Вроде уже реализовано - осталось убрать v-if, оставив только бинд на class.
    – yar85
    Commented 1 авг. 2021 в 1:08
  • jsfiddle.net/6t4u9Lwg осталось только плавно закрывать блок Commented 1 авг. 2021 в 9:33

1 ответ 1

0

Заберите v-if и додайте клас item вместо v-if

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.