Angular8 css3动画侧边栏滑动

àì夳堔傛蜴生んèń 2024-04-17 16:36 61阅读 0赞

实现了一个小demo,效果截图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1][]

上代码：

html页面：

<div class="centen">
        内容
        <button (click)="toShow()">comeon！</button>
    
        <br>
    
        <button (click)="toBack()">go Banck！</button>
    </div>
    
    <aside id="aside">
        侧边栏
    </aside>

ts代码：

import { Component, OnInit} from '@angular/core';
    
    @Component({
      selector: 'app-transition',
      templateUrl: './transition.component.html',
      styleUrls: ['./transition.component.scss']
    })
    export class TransitionComponent implements OnInit {
    
    
      constructor() { }
    
      ngOnInit() {
      }
    
      //出来动画
      toShow(){
     
       let str:any =  document.getElementById("aside");
    
       str.style.transform="translate(0,0)";
      }
      //回去动画  
      toBack(){
        let str:any =  document.getElementById("aside");
    
       str.style.transform="translate(100%,0)";
      }
    
    
    }

最重要的css样式：

#aside{
        width: 200px;
    
        height: 1100px;
    
        position: absolute;
    
        right: 0px;
    
        top: 0px;
    
        background: black;
    
        color: pink;
    
    
        transform: translate(100%,0);
    
        transition: all 1s;
    }

全局css样式：

body{
        width: 100px;
        overflow: hidden;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c49182f791da4b0e80e0cfd908850233.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1b2RvbmcxNTAx_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5dc9cb78297a41229a193cf46a803ad5.png