如何啓動並顯示div層的動畫？

嗨，大家好。我需要在單擊按鈕時打開菜單div層，如果使用角度在鼠標懸停事件上打開它，請關閉菜單div層。如何從部分關閉的div開始，然後在點擊事件中打開它？我的代碼看起來很合理，但它不起作用。下面是代碼：如何啓動並顯示div層的動畫？

<!DOCTYPE HTML> 
    <html> 
    <head> 
    <meta http-equiv="content-type" content="text/html" /> 
    <meta name="author" content="" /> 




    <title>collapsible meny 5</title> 
    <script type="text/javascript" src="js/angular.min.js"></script> 
    <script type="text/javascript" src="js/angular-animate.js"></script> 

    <style> 
    .menu.ng-show { 
    animation: my_slide_animation 2s linear; 
    } 
    @keyframes my_slide_animation { 
    from { width:20px; } 
    to { width: 560px; } 
    } 

    .menu { 
    float: right; 
    top:80px; 
    right: 10px; 
    width:20px; 
    height:430px; 
    background-color:white; 
    border-color:#0AA7E5; 
    border-style: solid; 
    border-width: 3px; 
    border-left-width: 20px; 

    border-radius: 6px 6px;  
    font: bold 12px Verdana; 
    color: red;  
    overflow: none;  
    } 


    .button { 
    width:260px; 
    height:30px; 
    background-color:white; 
    border-color:#0AA7E5; 
    border-style: solid; 
    border-width: 3px; 
    border-left-width: 10px; 
    border-right-width: 10px; 
    border-radius: 6px 6px;  
    font: bold 12px Verdana; 
    color: red; 
    } 

    </style> 

    </head> 

    <body ng-app="myApp" ng-init="menu"> 
    <button class="button" ng-mouseover="" ng-click="menu.ng-show"> 
    Contact Us</button> 

    <div class="menu" ng-show="menu"></div> 
    <script> 
    var app = angular.module('myApp', ['ngAnimate']); 
    </script> 

    </body> 
    </html>

請指教我在我的邏輯錯誤。在此先感謝， Batoe

來源

2016-09-20 Tony Starke

您可以通過以下代碼實現此目的。

<body ng-app="myApp" > 
    <button class="button" ng-mouseover="menu=false" ng-click="menu = !menu"> 
    Contact Us</button> 
    <div class="menu" ng-show="menu"></div> 
    <script> 
    var app = angular.module('myApp', ['ngAnimate']); 
    </script> 
    </body>

請找工作的朋友here。這就是你想要的嗎？

來源

2016-09-20 03:59:57

好的，這是一個開始。但是從開始到結束div都沒有動畫。 –

@Tony Starke更新了同樣的plunker.Let我知道是否有什麼需要進一步。 –

傑出！如何設置默認視圖，其中菜單僅爲寬度：20px;也許是一個聲明默認視圖的函數？或ng init聲明初始範圍菜單視圖？ –

如何啓動並顯示div層的動畫？

回答

相關問題