Skip to content
Snippets Groups Projects
Commit 4e42547f authored by gabriel's avatar gabriel
Browse files

test slider

parent cd8e5a8d
No related branches found
No related tags found
1 merge request!3test slider
......@@ -94,5 +94,8 @@
}
}
}
},
"cli": {
"analytics": "0bc6e4f8-bb1c-416f-b778-24cb5a0c67cc"
}
}
This diff is collapsed.
......@@ -3,10 +3,12 @@ import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ChangePageComponent } from './change-page/change-page.component';
@NgModule({
declarations: [
AppComponent
AppComponent,
ChangePageComponent
],
imports: [
BrowserModule,
......
.background{
display: flex;
flex-wrap: nowrap;
}
.border{
background-color: brown;
height: 100vh;
width: 92vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.02,1,1,.98);
border: 0px !important;
}
.border2{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 800vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
transition-timing-function: cubic-bezier(.02,1,1,.98);
border: 0px;
}
.border:hover {
background-color: brown;
height: 100vh;
width: 112vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
border: 0px;
}
.bordertest{
background-color:brown;
height: 100vh;
width: 800vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.5s;
transition-duration: cubic-bezier(.02,1,1,.98);
border: 0px;
}
.bordertest2{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 92vw;
padding: 0px;
margin: 0px;
border: 0px;
}
.bordertest2:hover{
background-image: linear-gradient(red, yellow);
height: 100vh;
width: 112vw;
padding: 0px;
margin: 0px;
transition-property: width;
transition-duration: 0.3s;
border: 0px;
}
\ No newline at end of file
<div class="background">
<div class="border" id="border" (click)="changeclass()"></div>
<div class="border2" id="border2" (click)="changeclass()"></div>
</div>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ChangePageComponent } from './change-page.component';
describe('ChangePageComponent', () => {
let component: ChangePageComponent;
let fixture: ComponentFixture<ChangePageComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ChangePageComponent ]
})
.compileComponents();
fixture = TestBed.createComponent(ChangePageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component } from '@angular/core';
@Component({
selector: 'app-change-page',
templateUrl: './change-page.component.html',
styleUrls: ['./change-page.component.css']
})
export class ChangePageComponent {
changeclass(): void {
var b1 = document.getElementById("border")
if(b1 != null)
{
var b2 = document.getElementById("border2")
if(b2 != null){
if(b1.className == "border"){
b1.className="bordertest"
b2.className="bordertest2"}
else{
b1.className="border"
b2.className="border2"
}
}
}
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slider</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<body style="background-color: bisque; margin: 0px;">
<app-root></app-root>
</body>
</html>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment