Блог

Главная - Вопросы по программированию - Как сделать анимацию видимой полностью в формате html

Как сделать анимацию видимой полностью в формате html

#javascript #html #vue.js #dom

#javascript #HTML #vue.js #dom

Вопрос:

Я пытаюсь сделать добавленный контент полностью видимым.
Но когда обработка анимации и контейнер запрещают переполнение, конкретная анимация не отображается пользователю.
Я думаю, что попытка переместить уважаемый элемент была бы хорошим решением.
Но я не смог решить эту проблему.
Например, я собираюсь реализовать, как показано ниже.
Вот пример

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="list">
      <div class="item-area" v-for="item in items">
         <div class="item" @click="toggleMenu(item)">
           {{item.name}}   
         </div>   
         <transition name="menu">
           <ul class="menu" v-if="item._showMenu">
             <li>Menu1</li>
             <li>Menu2</li>
             <li>Menu3</li>
           </ul>           
         </transition>
      </div>   
  </div>
</div> 

 var app = new Vue({
    el:"#app",
  data:{
      items:[{
        name:"Item 1",
        _showMenu:false
      },{
        name:"Item 2",
        _showMenu:false
      },{
        name:"Item 3",
        _showMenu:false
      },{
        name:"Item 4",
        _showMenu:false
      },{
        name:"Item 5",
        _showMenu:false
      },{
        name:"Item 6",
        _showMenu:false
      }]
  },
  methods:{
    hideMenu(){
       this.items.forEach(item=>{
        this.$set(item, "_showMenu", false);
       })
    },
    toggleMenu(item){
         if(!item._showMenu){
          this.hideMenu();
       }
       this.$set(item, "_showMenu", !item._showMenu);
    }
  }
}) 
 #app{
  padding:10px;
  background: #999;
  overflow:hidden;
}

.list{
  position:relative;
}

.list .item-area{
  position:relative;
  cursor:pointer;
}

.list .item{
  padding:10px;
}

.list .item:hover{
  background:#eee;
}

.list .item-area .menu{
  margin:0;
  padding:0;
  background:#01a6F4;
  position:absolute;
  top:100%;
  z-index:100;
  list-style:none;
  transform-origin: top left;
}

.menu-enter-active, .menu-leave-active {
  transition: transform .5s;
}
.menu-enter, .menu-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform:scaleY(0);
  
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="list">
      <div class="item-area" v-for="item in items">
         <div class="item" @click="toggleMenu(item)">
           {{item.name}}   
         </div>   
         <transition name="menu">
           <ul class="menu" v-if="item._showMenu">
             <li>Menu1</li>
             <li>Menu2</li>
             <li>Menu3</li>
           </ul>           
         </transition>
      </div>   
  </div>
</div>

При нажатии на пункты 1, 2, 3, 4 меню отображается правильно.
Но при нажатии на item5, item6 контейнер вырезает определенную часть.
Чтобы устранить проблему, я хотел бы переместить элемент вверх, чтобы показать анимацию плавно.
Как я мог достичь этой мысли?

Я пробовал так.
Но я хочу двигаться вверх по пункту 5 меньше, чем при нажатии на пункт 6.

Комментарии:

1. Вам нужно решение, в котором выпадающий список отображается под контейнером?

2. Похоже на это. Но я хочу переместить ссылочный элемент вверх, чтобы полностью отобразить выпадающий список.

Метки: