<!DOCTYPE html>
<html ng-app="transitionApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Transitions - AngularJS</title>
</head>
<body ng-controller="TransitionController">
<div class="container">
<div class="header">
<h1>đŦ Page Transitions</h1>
<p>Smooth & Beautiful AngularJS Page Transitions</p>
</div>
<!-- Navigation & Controls -->
<div class="nav-container">
<div class="transition-selector">
<label>đ¨ Choose Transition Effect:</label>
<div class="transition-options">
<button class="transition-btn"
ng-class="{active: currentTransition === 'fade'}"
ng-click="setTransition('fade')">
Fade
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'slide-left'}"
ng-click="setTransition('slide-left')">
Slide Left
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'slide-right'}"
ng-click="setTransition('slide-right')">
Slide Right
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'slide-up'}"
ng-click="setTransition('slide-up')">
Slide Up
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'slide-down'}"
ng-click="setTransition('slide-down')">
Slide Down
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'scale'}"
ng-click="setTransition('scale')">
Scale
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'zoom'}"
ng-click="setTransition('zoom')">
Zoom
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'rotate'}"
ng-click="setTransition('rotate')">
Rotate
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'flip'}"
ng-click="setTransition('flip')">
Flip
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'bounce'}"
ng-click="setTransition('bounce')">
Bounce
</button>
<button class="transition-btn"
ng-class="{active: currentTransition === 'swing'}"
ng-click="setTransition('swing')">
Swing
</button>
</div>
</div>
<div class="nav-buttons">
<button class="nav-btn"
ng-class="{active: currentPage === 'home'}"
ng-click="navigateTo('home')">
đ Home
</button>
<button class="nav-btn"
ng-class="{active: currentPage === 'about'}"
ng-click="navigateTo('about')">
âšī¸ About
</button>
<button class="nav-btn"
ng-class="{active: currentPage === 'services'}"
ng-click="navigateTo('services')">
âī¸ Services
</button>
<button class="nav-btn"
ng-class="{active: currentPage === 'contact'}"
ng-click="navigateTo('contact')">
đ§ Contact
</button>
</div>
</div>
<!-- View Container with Transitions -->
<div class="view-container">
<!-- Home Page -->
<div class="page-view page-home {{currentTransition}}-transition"
ng-if="currentPage === 'home'">
<h1 class="page-title">đ Welcome Home</h1>
<p class="page-content">
Experience smooth and beautiful page transitions with AngularJS.
Choose from multiple transition effects and navigate between pages seamlessly.
</p>
<div class="page-features">
<div class="feature-card">
<div class="feature-icon">âĄ</div>
<div class="feature-title">Fast Performance</div>
<div class="feature-desc">Optimized transitions for smooth 60fps animations</div>
</div>
<div class="feature-card">
<div class="feature-icon">đ¨</div>
<div class="feature-title">Beautiful Design</div>
<div class="feature-desc">Modern and elegant transition effects</div>
</div>
<div class="feature-card">
<div class="feature-icon">đą</div>
<div class="feature-title">Responsive</div>
<div class="feature-desc">Works perfectly on all devices and screen sizes</div>
</div>
</div>
</div>
<!-- About Page -->
<div class="page-view page-about {{currentTransition}}-transition"
ng-if="currentPage === 'about'">
<h1 class="page-title">âšī¸ About Us</h1>
<p class="page-content">
We create stunning web experiences with cutting-edge technologies.
Our passion for smooth animations and user experience drives everything we do.
</p>
<div class="page-features">
<div class="feature-card">
<div class="feature-icon">đĄ</div>
<div class="feature-title">Innovation</div>
<div class="feature-desc">Pushing the boundaries of web technology</div>
</div>
<div class="feature-card">
<div class="feature-icon">đ¯</div>
<div class="feature-title">Focus</div>
<div class="feature-desc">Dedicated to delivering excellence</div>
</div>
<div class="feature-card">
<div class="feature-icon">đ</div>
<div class="feature-title">Growth</div>
<div class="feature-desc">Constantly evolving and improving</div>
</div>
</div>
</div>
<!-- Services Page -->
<div class="page-view page-services {{currentTransition}}-transition"
ng-if="currentPage === 'services'">
<h1 class="page-title">âī¸ Our Services</h1>
<p class="page-content">
We offer comprehensive web development services including design,
development, and optimization for the best user experience.
</p>
<div class="page-features">
<div class="feature-card">
<div class="feature-icon">đģ</div>
<div class="feature-title">Web Development</div>
<div class="feature-desc">Full-stack development solutions</div>
</div>
<div class="feature-card">
<div class="feature-icon">đ¨</div>
<div class="feature-title">UI/UX Design</div>
<div class="feature-desc">Beautiful and intuitive interfaces</div>
</div>
<div class="feature-card">
<div class="feature-icon">âĄ</div>
<div class="feature-title">Optimization</div>
<div class="feature-desc">Performance and SEO optimization</div>
</div>
</div>
</div>
<!-- Contact Page -->
<div class="page-view page-contact {{currentTransition}}-transition"
ng-if="currentPage === 'contact'">
<h1 class="page-title">đ§ Get In Touch</h1>
<p class="page-content">
Have a project in mind? We'd love to hear from you!
Reach out and let's create something amazing together.
</p>
<div class="page-features">
<div class="feature-card">
<div class="feature-icon">đ§</div>
<div class="feature-title">Email</div>
<div class="feature-desc">info@example.com</div>
</div>
<div class="feature-card">
<div class="feature-icon">đą</div>
<div class="feature-title">Phone</div>
<div class="feature-desc">+1 (555) 123-4567</div>
</div>
<div class="feature-card">
<div class="feature-icon">đ</div>
<div class="feature-title">Location</div>
<div class="feature-desc">123 Main St, City, State</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
<script>
angular.module('transitionApp', ['ngAnimate'])
.controller('TransitionController', ['$scope', function($scope) {
// Initialize
$scope.currentPage = 'home';
$scope.currentTransition = 'fade';
// Available transitions
$scope.transitions = [
'fade', 'slide-left', 'slide-right', 'slide-up', 'slide-down',
'scale', 'zoom', 'rotate', 'flip', 'bounce', 'swing'
];
// Navigate to page
$scope.navigateTo = function(page) {
if ($scope.currentPage !== page) {
$scope.currentPage = page;
}
};
// Set transition effect
$scope.setTransition = function(transition) {
$scope.currentTransition = transition;
};
// Keyboard navigation
document.addEventListener('keydown', function(e) {
var pages = ['home', 'about', 'services', 'contact'];
var currentIndex = pages.indexOf($scope.currentPage);
if (e.key === 'ArrowRight' && currentIndex < pages.length - 1) {
$scope.navigateTo(pages[currentIndex + 1]);
$scope.$apply();
} else if (e.key === 'ArrowLeft' && currentIndex > 0) {
$scope.navigateTo(pages[currentIndex - 1]);
$scope.$apply();
}
});
}]);
</script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #495057 0%, #495057 100%);
min-height: 100vh;
overflow-x: hidden;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
color: white;
margin-bottom: 30px;
padding: 30px 20px;
}
.header h1 {
font-size: 2.8rem;
font-weight: 700;
margin-bottom: 10px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.header p {
font-size: 1.1rem;
opacity: 0.95;
}
/* Navigation */
.nav-container {
background: white;
border-radius: 16px;
padding: 20px;
margin-bottom: 30px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.transition-selector {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 2px solid #e0e0e0;
}
.transition-selector label {
display: block;
color: #495057;
font-weight: 700;
margin-bottom: 12px;
font-size: 1.1rem;
}
.transition-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.transition-btn {
padding: 10px 16px;
background: #f5f5f5;
border: 2px solid #e0e0e0;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
transition: all 0.3s;
text-align: center;
color: #555;
}
.transition-btn:hover {
background: #27ae60;
color: white;
border-color: #27ae60;
transform: translateY(-2px);
}
.transition-btn.active {
background: #27ae60;
color: white;
border-color: #27ae60;
}
.nav-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.nav-btn {
flex: 1;
min-width: 150px;
padding: 15px 25px;
background: linear-gradient(135deg, #27ae60 0%, #229954 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 12px rgba(39, 174, 96, 0.3);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.nav-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}
.nav-btn.active {
background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}
/* View Container */
.view-container {
position: relative;
min-height: 500px;
perspective: 1000px;
}
.page-view {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
background: white;
border-radius: 16px;
padding: 50px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.page-title {
font-size: 3rem;
color: #2c3e50;
margin-bottom: 20px;
font-weight: 700;
text-align: center;
}
.page-content {
font-size: 1.1rem;
line-height: 1.8;
color: #555;
text-align: center;
margin-bottom: 30px;
}
.page-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 40px;
}
.feature-card {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.feature-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
}
.feature-desc {
font-size: 0.95rem;
opacity: 0.9;
line-height: 1.6;
}
/* Page Color Themes */
.page-home { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.page-about { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.page-services { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.page-contact { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.page-home .page-title,
.page-about .page-title,
.page-services .page-title,
.page-contact .page-title,
.page-home .page-content,
.page-about .page-content,
.page-services .page-content,
.page-contact .page-content {
color: white;
}
/* Transition: Fade */
.fade-transition.ng-enter {
opacity: 0;
transition: opacity 0.5s ease;
}
.fade-transition.ng-enter-active {
opacity: 1;
}
.fade-transition.ng-leave {
opacity: 1;
transition: opacity 0.5s ease;
}
.fade-transition.ng-leave-active {
opacity: 0;
}
/* Transition: Slide Left */
.slide-left-transition.ng-enter {
transform: translateX(100%);
transition: transform 0.5s ease;
}
.slide-left-transition.ng-enter-active {
transform: translateX(0);
}
.slide-left-transition.ng-leave {
transform: translateX(0);
transition: transform 0.5s ease;
}
.slide-left-transition.ng-leave-active {
transform: translateX(-100%);
}
/* Transition: Slide Right */
.slide-right-transition.ng-enter {
transform: translateX(-100%);
transition: transform 0.5s ease;
}
.slide-right-transition.ng-enter-active {
transform: translateX(0);
}
.slide-right-transition.ng-leave {
transform: translateX(0);
transition: transform 0.5s ease;
}
.slide-right-transition.ng-leave-active {
transform: translateX(100%);
}
/* Transition: Slide Up */
.slide-up-transition.ng-enter {
transform: translateY(100%);
transition: transform 0.5s ease;
}
.slide-up-transition.ng-enter-active {
transform: translateY(0);
}
.slide-up-transition.ng-leave {
transform: translateY(0);
transition: transform 0.5s ease;
}
.slide-up-transition.ng-leave-active {
transform: translateY(-100%);
}
/* Transition: Slide Down */
.slide-down-transition.ng-enter {
transform: translateY(-100%);
transition: transform 0.5s ease;
}
.slide-down-transition.ng-enter-active {
transform: translateY(0);
}
.slide-down-transition.ng-leave {
transform: translateY(0);
transition: transform 0.5s ease;
}
.slide-down-transition.ng-leave-active {
transform: translateY(100%);
}
/* Transition: Scale */
.scale-transition.ng-enter {
transform: scale(0.8);
opacity: 0;
transition: all 0.5s ease;
}
.scale-transition.ng-enter-active {
transform: scale(1);
opacity: 1;
}
.scale-transition.ng-leave {
transform: scale(1);
opacity: 1;
transition: all 0.5s ease;
}
.scale-transition.ng-leave-active {
transform: scale(1.2);
opacity: 0;
}
/* Transition: Zoom */
.zoom-transition.ng-enter {
transform: scale(0);
opacity: 0;
transition: all 0.5s ease;
}
.zoom-transition.ng-enter-active {
transform: scale(1);
opacity: 1;
}
.zoom-transition.ng-leave {
transform: scale(1);
opacity: 1;
transition: all 0.5s ease;
}
.zoom-transition.ng-leave-active {
transform: scale(0);
opacity: 0;
}
/* Transition: Rotate */
.rotate-transition.ng-enter {
transform: rotateY(90deg);
opacity: 0;
transition: all 0.6s ease;
}
.rotate-transition.ng-enter-active {
transform: rotateY(0);
opacity: 1;
}
.rotate-transition.ng-leave {
transform: rotateY(0);
opacity: 1;
transition: all 0.6s ease;
}
.rotate-transition.ng-leave-active {
transform: rotateY(-90deg);
opacity: 0;
}
/* Transition: Flip */
.flip-transition.ng-enter {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
transition: all 0.6s ease;
}
.flip-transition.ng-enter-active {
transform: perspective(400px) rotateX(0);
opacity: 1;
}
.flip-transition.ng-leave {
transform: perspective(400px) rotateX(0);
opacity: 1;
transition: all 0.6s ease;
}
.flip-transition.ng-leave-active {
transform: perspective(400px) rotateX(-90deg);
opacity: 0;
}
/* Transition: Bounce */
.bounce-transition.ng-enter {
animation: bounceIn 0.8s ease;
}
.bounce-transition.ng-leave {
animation: bounceOut 0.5s ease;
}
@keyframes bounceIn {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes bounceOut {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(0.3);
opacity: 0;
}
}
/* Transition: Swing */
.swing-transition.ng-enter {
animation: swingIn 0.8s ease;
}
.swing-transition.ng-leave {
animation: swingOut 0.5s ease;
}
@keyframes swingIn {
0% {
transform: rotateX(-100deg);
opacity: 0;
transform-origin: top;
}
100% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: top;
}
}
@keyframes swingOut {
0% {
transform: rotateX(0deg);
opacity: 1;
transform-origin: top;
}
100% {
transform: rotateX(100deg);
opacity: 0;
transform-origin: top;
}
}
@media (max-width: 768px) {
.header h1 {
font-size: 2rem;
}
.page-view {
padding: 30px 20px;
}
.page-title {
font-size: 2rem;
}
.nav-buttons {
flex-direction: column;
}
.nav-btn {
min-width: 100%;
}
.transition-options {
grid-template-columns: 1fr 1fr;
}
.page-features {
grid-template-columns: 1fr;
}
}
No comments yet. Be the first!