Utilizing ng-class in AngularJS to apply dynamic classes based on conditions

In my project, I am dynamically applying different CSS classes based on the variable 'statetostartwaves'. If the variable is '0', then class 1 (preloader_pause waves) should be used. Otherwise, if it is '1', then class 2 (preloader waves) should be applied.

HTML

<div  ng-class="statetostartwaves ===0 ? 'preloader_pause waves':(statetostartwaves ===1 ? 'preloader waves')" >
        <span></span>
        <span></span>
        <span></span>
 </div>

Angular App Controller

selektApp.controller('homeController',['$scope','$timeout',function($scope,$timeout) {

    $scope.statetostartwaves=0;
    $timeout(function(){

        $scope.statetostartwaves=1;


    ,}500);


}]);

CSS Animation Styles 

.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;


  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
 width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}
htmlcssangularjs

Answer №1

give this a shot

ng-class="{0: 'spinner_pause ripples', 1 : 'spinner ripples'}[startripples]"

you might want to double check your $timeout code for any syntax errors

$timeout(function(){ $scope.startripples=1;}, 500);

Answer №2

When utilizing the ternary operation with an else if condition, it is necessary to include an else condition. Adjust the condition as follows:

 ng-class="statetostartwaves === 0 ? 'preloader_pause waves' : (statetostartwaves === 1 ? 'preloader waves' : 'no class')"

In addition, in the $timeout function, a comma should follow the curly bracket. Change ,}500); to },500);

angular.module("app",[])
.controller("ctrl",function($scope,$timeout){
$scope.statetostartwaves = 0;
console.log('state>', $scope.statetostartwaves);
$timeout(function() {
$scope.statetostartwaves = 1;
console.log('state1>', $scope.statetostartwaves);
}, 500);

})
.waves {
    opacity:0;
  -webkit-animation: second 3s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
  animation: second 2s forwards;
  animation-iteration-count: 1;
  animation-delay: 1.2s;
  position: relative;
}
@-webkit-keyframes second {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
    top: -19px; 
  }
}
@keyframes second {
  30% {
    opacity: 0;
    top:-50px;
  }
  100% {
    opacity: 1;
    top: -200px; 
  }
}
.preloader {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader .6s infinite ease-in-out;
          animation: preloader .6s infinite ease-in-out;
}
.preloader span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
.preloader span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
}

@keyframes preloader {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 90px;
    -webkit-transform: translateY(45px);
            transform: translateY(45px);
    background: #3498db;
  }
  50%,100% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}



.preloader_pause {
  position: relative;
  width: 65px;
  margin: 0px 0px 0px 130px;
}
.preloader_pause span {
  position: absolute;
  display: block;
  bottom: -300px;
  left: 350px;
  width: 15px;
  height: 15px;

  border-radius: 10px;
  background: #3498db;
  -webkit-animation: preloader 0s infinite ease-in-out;
          animation: preloader 0s infinite ease-in-out;
}
.preloader_pause span:nth-child(2) {
  left: 390px;
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.preloader_pause span:nth-child(3) {
  left: 430px;
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.preloader_pause span:nth-child(4) {
  left: 33px;
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.preloader_pause span:nth-child(5) {
  left: 44px;
  -webkit-animation-delay: 800ms;
          animation-delay: 800ms;
}
.preloader_pause span:nth-child(6) {
  left: 55px;
  -webkit-animation-delay: 1000ms;
          animation-delay: 1000ms;
}

@-webkit-keyframes preloader {
  0% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 30px;
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}

@keyframes preloader_pause {
  0% {
    height: 15px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
  25% {
    height: 60px;
    -webkit-transform: translateY(30px);
            transform: translateY(30px);
    background: #3498db;
  }
  50%,100% {
    height: 5px;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    background: #3498db;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div  ng-class="statetostartwaves === 0 ? 'preloader_pause waves' : (statetostartwaves === 1 ? 'preloader waves' : 'no class')" >
        <span></span>
        <span></span>
        <span></span>
 </div>
 {{statetostartwaves}}
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stop the default drag behavior on an input range element in VueJS

Is there a way to disable the default drag functionality of an input range element without affecting the click feature? Users should be able to change values by clicking instead of dragging. <input type="range" min="0" max=& ...

javascripthtmlcssvue.jsvuejs2

Using Angular JS: Implementing ng-repeat with a personalized directive and a fluid model

I have a template structured like this: <div class="row search-panel"> <div ng-show="loadingAirports"> <i class="glyphicon glyphicon-refresh"></i> Searching... </div> <div ng-show="noResults"> ...

angularjsangularjs-ng-repeatangular-directiveangularjs-moduleui.bootstrap

Having trouble with Angular + Rails combination: Angular can't seem to locate the controller

Issue: I am encountering an error in my Angular / Rails app. When trying to access a Rails controller function from the Angular controller, I receive the following error: Uncaught TypeError: tasks.moveOrder is not a function. Strangely, all other functions ...

javascriptruby-on-railsrubyangularjs

Creating a personalized avatar using Bootstrap 5

Currently, I am working with Bootstrap 5 and am trying to create an avatar with different icons inside it, similar to a letter avatar. I want to have a placeholder where the icon can be added within it. Here is an example of what I have tried: <div widt ...

htmltwitter-bootstrapsassbootstrap-5avatar

Verify whether a user is marked as an administrator

I need to create a function called isAdmin() that checks if the current user is listed as an admin in the mongodb database. server.js app.get('/api/isadmin', function (req, res) { User.findById(req.user, function (err, user) { if (req.use ...

angularjsnode.jsmongoose

Excess space noted at the bottom of tablet and mobile versions of the page

I'm struggling to troubleshoot an issue with the mobile and tablet versions of a web-shop I'm designing for university. Some pages have excessive space after the HTML tag, but only on certain pages. I've tried commenting out CSS lines relate ...

javascripthtmljquerycssbootstrap-5

What is the rationale behind browsers on OSX not supporting the styling of HTML option elements?

As an OSX user, I primarily use Chrome and recently discovered that styling the HTML option element is not applied in any browser (Chrome, Firefox, Safari) on OSX. // HTML <select> <option class="option">Value 1</option> < ...

htmlcsswindowsmacos

Using more than one class at a time is causing issues

Essentially, I have a div and I want to create an exercise where I apply three different classes using vue.js. I attempted to use v-bind:class, specifically :class, but can I bind a class directly from CSS? This is what I tried: html <div :style="[my ...

javascripthtmlcssvue.jsvuejs2

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

Tips on combining JSON objects into one

Trying to create a bar-chart with two separate functions that return data. Here's an example of the first function: $scope.data = { labels: ['Jan', 'Feb', 'Mar'], datasets: [ { label: 'My ...

angularjsjson

Accessing an object from an AngularJS controller in an external function

I previously inquired about this issue and received a suggestion to add a service, but it did not solve the problem. I am trying to access a variable from a controller ($scope) within an external function. Below is a snippet of the example: app.controll ...

javascriptangularjs

What is the method to create a resizable table column border rather than resizing the bottom corner border?

At the moment, we are able to resize the table border when we drag the corner. However, my goal is to enable resizing on the right side of the full border. https://i.sstatic.net/yFI24.png Below is the CSS code for resizing: th{ resize: horizontal; ove ...

javascripthtmlcsshtml-tableangular13

Direct your attention to alternative data sources following the selection of an item in the typeahead search feature

Having some trouble with angular-ui bootstrap: I am using 2 input elements: <input type="text" ng-model="selected" uib-typeahead="state for state in states | filter:$viewValue | limitTo:8" typeahead-on-select="focusSuccessive($item, $model, $label, $ev ...

javascriptangularjsangular-ui

Discover the method for accessing a CSS Variable declared within the `:root` selector from within a nested React functional component

Motivation My main aim is to establish CSS as the primary source for color definitions. I am hesitant to duplicate these values into JavaScript variables as it would require updating code in two separate locations if any changes were made to a specific co ...

javascripthtmlcssreactjs

What is the solution to the question: "Hey there, time traveler. We are currently in an era where CSS prefixes are no longer necessary, thanks to the advances in prefix-less CSS

I'm having an issue in my Next.JS app with importing my stylesheet in _app.js. Here is how I currently import it: import '../public/css/Index.css'; The content of Index.css looks like this: .index-container { margin: 20px auto 0; } Wha ...

javascriptcssnext.jsautoprefixer

Tips for arranging cards in columns without causing vertical scrolling to be triggered

I am working with Bootstrap 5 and have created a column with multiple cards: https://jsfiddle.net/fzxc1v69/ Currently, all the cards are displayed one below the other, but I want them to be lined up horizontally instead. In my code, the .section class i ...

htmlcssbootstrap-5

Examining the false positive detection of an apparent visibility issue with

My goal is to check if the document is NOT scrollable using this code snippet: $el = document.documentElement const noscroll = $el.clientHeight === $el.scrollHeight // false console.log($el.clientHeight) // 977 console.log($el.scrollHeight) // 991 consol ...

htmlgoogle-chromevue.js

The mix-blend-mode feature is not compatible with Chrome browser

I'm having an issue with the mix-blend-mode property in Chrome, as it's not functioning correctly. However, it works perfectly fine on Firefox and Safari. My goal is to achieve a cutout text effect. Thank you for any assistance! h1 { mix-blend ...

cssmix-blend-mode

What are some ways to streamline inline styling without having to create numerous variables?

Currently, I am in the process of constructing a tab component and establishing inline variables for CSS styling. This particular project involves a streamlit app that allows me to modify settings on the Python side. At the moment, there are four elements ...

cssreactjstypescriptstreamlit

Is it possible to customize ASP Master Page HTML on a specific content page?

Incorporating ASP Master pages into my website, I have a specific need to include an "onkeypress" event handler to the <body> within the Master page, but solely for one individual page. How should this be approached? ...

asp.net.nethtmlmaster-pages