Title: How to make animation visible fully html
Tags: javascript;html;vue.js;dom
Question: I try to make the added content newly visible fully.
But when the animation processing and the container disallow to overflow, the specific animation doesn't show to the user.
I think that trying to moving up the respected element would be good solution.
But I couldn't solve this issue.
For example, I'm gonna implement like the below.
Here is an example
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;</script&gt;
<div id="app"&gt;
<div class="list"&gt;
<div class="item-area" v-for="item in items"&gt;
<div class="item" @click="toggleMenu(item)"&gt;
{{item.name}}
</div&gt;
<transition name="menu"&gt;
<ul class="menu" v-if="item._showMenu"&gt;
<li&gt;Menu1</li&gt;
<li&gt;Menu2</li&gt;
<li&gt;Menu3</li&gt;
</ul&gt;
</transition&gt;
</div&gt;
</div&gt;
</div&gt;
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=&gt;{
this.$set(item, "_showMenu", false);
})
},
toggleMenu(item){
if(!item._showMenu){
this.hideMenu();
}
this.$set(item, "_showMenu", !item._showMenu);
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"&gt;</script&gt;
<div id="app"&gt;
<div class="list"&gt;
<div class="item-area" v-for="item in items"&gt;
<div class="item" @click="toggleMenu(item)"&gt;
{{item.name}}
</div&gt;
<transition name="menu"&gt;
<ul class="menu" v-if="item._showMenu"&gt;
<li&gt;Menu1</li&gt;
<li&gt;Menu2</li&gt;
<li&gt;Menu3</li&gt;
</ul&gt;
</transition&gt;
</div&gt;
</div&gt;
</div&gt;
When clicking item1, 2, 3, 4, it shows the menu correctly.
But clicking item5, item6, the container cuts the specific part.
To fix the issue, I would like to move up the element to show the animation smoothly.
How could I achieve this thought?
I've tried like this.
But I want to move up item5 less than when clicking item6.
Comment: Similar of that. But I want to move up reference element to show dropdown fully.

Comment: Do you want a solution where the dropdown shows below the container?



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 0, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:11/26/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><vue.js><dom>', 'Title': 'How to make animation visible fully html', 'ViewCount': 35, 'id': 65017428, 'user_AboutMe': '<p>Hi everyone.</p>\n\n<p>I have experienced for 7+years for web and mobile with php frameworks such as wordpress, laravel, codeignitor , java.</p>\n\n<p>I have the strong knowledge about Android-sdk, android-ndk, resutful-api and good skills for web service , responsive web design, backend, shopify, amazon.</p>\n\n<p>I am an expert in web scraping and desktop app development.</p>\n\n<p>The result of my work will say my skill and make you happy.</p>\n\n<p>I can provide you the successful result in the deadline honestly.</p>\n\n<p>My skills is following.\nLanguages:: php, java, c/c++, c#, javascript , css , html5, python , objective_c/swift.</p>\n\n<p>Frameworks:: jquery, angularjs, nodejs, wordpress, laravel, codeignitor, bootstrap</p>\n\n<p>Platform:: Windows, Linux, Android</p>\n\n<p>Other skills: wsdl, xml, json, web services, tcp/ip , socket programming, networking.</p>\n', 'user_AccountId': 8330827.0, 'user_DisplayName': 'Andrew Li', 'user_Reputation': 995.0, 'user_Views': 136.0, 'user_id': 6259292.0}}