Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you!

<div ng-controller="MyCtrl">
 <div class='contendor_portafolio' class='next'>
 <video  id='video' width="320" height="240" ng-class='transicion' controls>
    <source src="video.mp4" type="video/mp4" />
 </video>
</div>
<button ng-click="fn_transicion()">again</button>


var myApp = angular.module('myApp',[]);
 function MyCtrl($scope) {
 $scope.fn_transicion= function(sentido){
        $scope.transicion="next";
 }
}
  #video{
     width: 98%;
     height: 100%;
     transition: all linear 0.5s;
     background:blue;
     -webkit-animation: next 1s 1; /* Safari 4+ */
  }

  @-webkit-keyframes next {
     25% { 
        -webkit-transform: translateX(1700px);
     }
     50% { 
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        display: none;
     }
     60% { 
        -webkit-transform: translateX(-1700px);
     }
     100%{
     } 
  }

I need use ng-class.

http://jsfiddle.net/wmvfx5cd/

javascriptcssangularjs

Answer №1

Implement a transition effect using CSS on the class .run-animation, which can be added and removed by clicking a button.

$scope.fn_transicion= function(sentido){
    $scope.transicion="next";
        var el = document.getElementById('video');
    // -> removing the class
    el.classList.remove("run-animation");
    void el.offsetWidth;
    // -> and re-adding the class
    el.classList.add("run-animation");
}

View the working Fiddle here

Enhanced Solution: Incorporating ng-class for better functionality

HTML:

 <div ng-controller="MyCtrl">
  <div class='contendor_portafolio' class='next'>
    <video  id='video' width="320" height="240" ng-class="{'run-animation': transicion === true}" controls>
        <source src="video.mp4" type="video/mp4" />
    </video>
  </div>
  <button ng-click="fn_transicion()">again</button>
</div>

JS:

 var myApp = angular.module('myApp',[]);
myApp.controller("MyCtrl", ['$scope','$timeout',
function($scope,$timeout) {
$scope.transicion=true;
    $scope.fn_transicion= function(sentido){
        $scope.transicion=false;
      $timeout(function() {
        $scope.transicion=true;
      }, 100);
    }

}]);

Updated Fiddle for reference

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

How to effectively clear the browser cache in AngularJS

Whenever I make modifications to my Angular template (html file), I find myself having to clear my browser cache and refresh the browser in order for the changes to take effect. Is there a workaround for this inconvenience? I primarily use Chrome and Fire ...

angularjscaching

Struggling to create an access token with the Slack API

My goal is to retrieve an access token from the Slack API. When I use the code provided below, it generates an authorization URL containing a temporary code in the query string. Once permissions are granted, the process redirects to /slack/oauthcallback. ...

javascriptnode.jsaccess-tokenslack-api

Click twice on the editable AngularJS table to wrap each item

As a new learner of Angularjs, I found an existing code example and decided to customize it. My goal was to enable double-click editing for each li item. However, after adding one more li, the functionality did not work as expected. <li ng-dblclick="st ...

javascriptangularjs

Sharing data between controllers in angularjs can be achieved through various methods such as using

Struggling with accessing data between controllers in my journey to learn angularJS. The first controller fetches a list of currencies from the api and assigns it to $scope.currencies. When I trigger the edit function, the intention is for the view to swi ...

angularjs

Is it possible to condense the coding of a vast array of objects into a more concise format?

Currently working on a personal project in react.js and aiming to write cleaner code. Is there a way to condense this code into just two lines or something similar? I attempted to create objects of arrays like const apps= {app_name:['Maps',&apo ...

javascriptreactjs

Pick Control - Utilize jQuery to display options that haven't been chosen before

Seeking assistance with a table view that includes a button for dynamically adding new rows. Each row contains a select control. Using Select2 for styling purposes. How can I ensure that when adding a new row, the select options only display those not prev ...

javascriptjqueryhtml

Angular 2 Guide on macOS Sierra Shows "Page Not Found" Error in Web Browser

I've been delving into Angular 2 with TypeScript on my OS X machine. Following the tutorial to the T, I didn't encounter any errors during compilation. Upon executing the npm start command, everything seemed to be smooth sailing as a new tab open ...

angularjsnode.jstypescriptangularosx-elcapitan

Having trouble getting an HTML form to work when making a PHP and Ajax request

I am trying to validate an HTML form using Ajax to prevent the browser from loading the page. Ideally, when a user enters their first name, it should display above the HTML form. However, I am encountering an issue where it is not showing up as expected... ...

javascriptphpjquery

Leveraging the power of modernizr in an angular module to handle multiple

My current setup involves the use of 'Modernizr' to detect mobile devices. I have also created a file called 'touchevent.js' specifically for these devices. Within touchevent.js: var touchApp = angular.module('ngTouchEvent', ...

angularjsmodernizr

Utilizing Angular routes within a Node.js application deployed on Heroku

I've been working on deploying an AngularJS project to Heroku. The app functions perfectly fine locally and when using heroku local web. However, upon attempting to access it, I encounter the error TypeError: response.sendFile is not a function. Ser ...

angularjsnode.jsheroku

Accessing Rails controller information via a JavaScript AJAX request

In the process of developing a rails application, I have implemented code within the controller to interact with an API. Initially, I call the inventories endpoint, followed by separate calls to two other id endpoints (store_id and product_id) in order to ...

javascriptjqueryruby-on-railsajaxapi

Jest - verifying the invocation of local storage within an async function that is currently being mocked

I need assistance with testing an API call within a React component. The current setup involves setting localStorage in the api call, which is causing issues when trying to test if it's being called correctly. login = () => { // <--- If I se ...

javascriptreactjsjestjs

What is the best way to make a Modal triggered by a loop embedded within a table function properly on mobile devices?

While the modal is functioning properly on desktop, it seems to be encountering issues on mobile devices. The modal appears behind the background and is confined by the boundaries of the table (tbody). Below is the code snippet for triggering the modal: ...

javascriptphpbootstrap-4

Configuration options for content division in a table cell

Please see the following fiddle which I have attempted: http://jsfiddle.net/9LdEc/ code: html: <div id="CorpDealerSearch"> <div class="row"> <div class="left"> Quarter To Date </div&g ...

htmlcss

Having trouble passing $scope, $route, or $http in your AngularJS factory functions?

Why does my factory keep throwing an error when the $scope, $route, $http are present? app.factory("factoryContacts",function($scope,$route,$http){ return { getContacts: function(){ return $http({ me ...

angularjsjqueryrequirejs

How to write a unit test for a factory in AngularJS using Karma?

Currently, I am developing a basic AngularJS 1.x web application. Here is a breakdown of my project structure: main.js: var app = angular.module('app', []); factory.js app.factory('DataFactory', function(){ var DataService = {}; ...

angularjsunit-testingkarma-jasmine

Enhancing the background of a website with the power of CSS

I am looking to create a customized table without the balls/pots in it. The number of rows on the y-axis will vary depending on the number of names I have, and can be more or less. The values on the x-axis are determined by a parameter included in the URL ...

javascriptjqueryhtmlcss

Ensuring the validity of controls within various div elements using AngularJS

I have implemented AngularJs in my project and I am facing an issue with two div elements that are being hidden and shown alternately. Each div contains certain controls with "required" validation set on the submit button click event. By default, the div n ...

angularjs

Cease the use of bi-directional data binding on an Angular directive

One way I've been attempting to send information to a directive is through the following setup: <ui-message data="{{app}}"></ui-message> In my controller, this is how I define it: app.controller("testCtrl", function($scope) { $scope.a ...

javascriptangularjs

How can you convert a JavaScript object with nested arrays into JSON format?

I have been working with a JavaScript object that contains nested objects with associative arrays. I attempted to use the stringify function from the json2.js library, but the output did not include the arrays inside the nested objects. In my scenario, I b ...

javascriptarraysjsonassociativestringify